How to use js code to realize the dynamic tangyuan special effect of Lantern Festival
This article Xiaobian for you to introduce in detail "how to use js code to achieve dynamic Lantern Festival tangyuan special effects", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use js code to achieve dynamic Lantern Festival glutinous rice dumplings special effects" can help you solve your doubts.
Principle: need a cut picture, by constantly positioning so that the picture is like a frame of the picture in the playback to form an animation
Effect picture:
Screenshot address:
Https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
Page code:
Home page $(function () {/ 6210 / / 0270540810 1080 1890 2700 2970 3510 3780 4050 4320 5130 594064807290 / / scheduled tasks, execute function setInterval ("tangyuan ()", setInterval ("tangyuan1 ()", 100); / / setInterval ("indexChange ()", 1);}); / / tangyuan is digging var count = 0function tangyuan () {count = count-3780 () every 100ms If (count = =-8370) {count = 0;} var ctxpath ='${ctxpath}'; / / url ("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") / / https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png $(" # tangyuan ") .css (" background "," url ("+ ctxpath+" / img/baidu/baidu_tangyuan.png) "+ count+" px "+" 0px no-repeat ") } / / dig tangyuan upside down var count1 =-8370; function tangyuan1 () {count1 = count1 + 270; if (count1 = = 0) {count1 =-8370;} var ctxpath ='${ctxpath}' / / url ("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") / / https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png $(" # tangyuan1 ") .css (" background "," url ("+ ctxpath+" / img/baidu/baidu_tangyuan.png) "+ count1+" px "+" 0px no-repeat ") } ● dumplings ∀ dumplings ●: I'm going to dig dumplings backwards (* dumplings dumplings *) o: reading here, this article "how to use js code to achieve dynamic Lantern Festival tangyuan special effects" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, Welcome to the industry information channel.
