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

上一篇：2022情人节表白特效代码最新汇总【推荐】

下一篇：没有了

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

来源：网友投稿关注：时间：2022-02-13 20:03

☉首先声明，只要是我们的vip会员所有源码均可以免费下载，不做任何限制(了解更多)
☉本站的源码不会像其它下载站一样植入大量的广告。为了更好的用户体验以后坚持不打水印
☉本站只提供精品织梦源码，源码在于可用，不在多！！希望在这里找到你合适的。
☉本站提供的整站织梦程序，均带数据及演示地址。可以在任一源码详情页查看演示地址
☉本站所有资源（包括源码、模板、素材、特效等）仅供学习与参考，请勿用于商业用途。
☉如有其他问题，请加网站客服QQ进行交流。