怎么用js代码实现动态的元宵节汤圆特效

2024-10-31 技术教程

本文小编为大家详细介绍“怎么用js代码实现动态的元宵节汤圆特效”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用js代码实现动态的元宵节汤圆特效”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

原理：需要一张切图，通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画

效果图：

切图地址：

https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png

页面代码：

<!DOCTYPEhtml><%@pagelanguage="java"contentType="text/html;charset=UTF-8"%><%StringctxPath=request.getContextPath();request.setAttribute("ctxpath",ctxPath);//项目根路径%><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><scriptsrc="${ctxpath}/js/jquery-1.11.3.min.js"></script><%--<linkhref="${ctxpath}/css/main.css"rel="stylesheet">--%><title>首页</title><styletype="text/css"></style><scripttype="text/javascript">$(function(){//6210//0270540810108018902700297035103780405043205130594064807290//定时任务,每隔100ms执行一次函数setInterval("tangyuan()",100);setInterval("tangyuan1()",100);//setInterval("indexChange()",1);});//汤圆正着挖varcount=0;functiontangyuan(){count=count-270;if(count==-8370){count=0;}varctxpath='${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"+"0pxno-repeat");}//汤圆倒着挖varcount1=-8370;functiontangyuan1(){count1=count1+270;if(count1==0){count1=-8370;}varctxpath='${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"+"0pxno-repeat");}</script></head><body><spanstyle="position:absolute;left:30%">汤圆我要正着挖(●ˇ∀ˇ●)：</span><divid="tangyuan"style="position:absolute;top:0px;left:50%;cursor:pointer;width:270px;height:129px;margin-left:-135px;"title="团团圆圆乐元宵"></div><spanstyle="position:absolute;left:0%">汤圆我要倒着挖o(*￣︶￣*)o：</span><divid="tangyuan1"style="position:absolute;top:0px;left:20%;cursor:pointer;width:270px;height:129px;margin-left:-135px;"title="团团圆圆乐元宵"></body></html>

读到这里，这篇“怎么用js代码实现动态的元宵节汤圆特效”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。