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

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

效果图：

切图地址：

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实现动态的“元宵节汤圆”特效（仿百度）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！