js实现动态的“元宵节汤圆”特效（仿百度）-9543建站博客

广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

js实现动态的“元宵节汤圆”特效（仿百度）

模仿百度首页“元宵节汤圆”动图：（js的定时任务：setInterval）

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

效果图：

切图地址：

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

登录后复制

页面代码：

<!DOCTYPE html><%@ page language="java" contentType="text/html; charset=UTF-8"%><%    String ctxPath = request.getContextPath();    request.setAttribute("ctxpath", ctxPath);//项目根路径%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script src="${ctxpath}/js/jquery-1.11.3.min.js"></script><%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>   <title>首页</title><style type="text/css"></style><script type="text/javascript"> $(function(){ //6210    // 0 270 540 810 1080 1890 2700 2970 3510 3780 4050 4320 5130 5940 6480 7290    // 定时任务,每隔100ms执行一次函数    setInterval("tangyuan()",100);    setInterval("tangyuan1()",100);    //setInterval("indexChange()",1);});//汤圆 正着挖var count = 0;function tangyuan(){    count = count - 270;    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"); }//汤圆 倒着挖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"); }</script></head><body>    <span style="position: absolute;left: 30%">汤圆我要正着挖(●ˇ∀ˇ●)：</span>    <!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; -->    <div id="tangyuan" style="position: absolute; top: 0px; left: 50%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">    </div>    <span style="position: absolute;left: 0%">汤圆我要倒着挖o(*￣︶￣*)o：</span>    <!-- background: url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png") -2970px 0px no-repeat; -->    <div id="tangyuan1" style="position: absolute; top: 0px; left: 20%; cursor: pointer; width: 270px; height: 129px; margin-left: -135px;" title="团团圆圆乐元宵">    </body></html>

登录后复制

推荐学习：《javascript视频教程》

以上就是js实现动态的“元宵节汤圆”特效（仿百度）的详细内容，更多请关注9543建站博客其它相关文章！