怎么用js代码实现动态的元宵节汤圆特效
短信预约 -IT技能 免费直播动态提醒
本文小编为大家详细介绍“怎么用js代码实现动态的元宵节汤圆特效”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用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 class="lazy" data-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>读到这里，这篇“怎么用js代码实现动态的元宵节汤圆特效”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网行业资讯频道。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
