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 元宵节

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

相关文章