模仿百度首页“元宵节汤圆”动图：（主要运用了js的定时任务：setInterval）
原理：需要一张切图，通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画
效果图：
切图地址：
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><!–background:url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")-2970px0pxno-repeat;–><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><!–background:url("https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png")-2970px0pxno-repeat;–><divid="tangyuan1"style="position:absolute;top:0px;left:20%;cursor:pointer;width:270px;height:129px;margin-left:-135px;"title="团团圆圆乐元宵"></body></html>
产品猿社区致力收录更多优质的商业产品，给服务商以及软件采购客户提供更多优质的软件产品，帮助开发者变现来实现多方共赢；
日常运营的过程中我们难免会遇到各种版权纠纷等问题，如果您在社区内发现有您的产品未经您授权而被用户提供下载或使用，您可按照我们投诉流程处理，点我投诉；
本文来自用户发布投稿，不代表产品猿立场 ；若对此文有疑问或内容有严重错误，可联系平台客服反馈；
部分产品是用户投稿，可能本文没有提供官方下下载地址或教程，若您看到的内容没有下载入口，您可以在我们产品园商城搜索看开发者是否有发布商品；若您是开发者，也诚邀您入驻商城平台发布的产品，地址：点我进入；
如若转载，请注明出处：https://www.chanpinyuan.cn/34287.html；
