Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.