JavaScript元宵节吃可爱汤圆特效

今天来分享一个javascript的元宵节吃汤圆特效

先来上效果图

下面再来看看代码，为了方便大家复制，所以这里放的是代码，文末会放代码截图还有素材图片，便于观看

String ctxPath = request.getContextPath();

request.setAttribute("ctxpath", ctxPath);//项目根路径

--%>

首页

$(function(){

// 定时任务,每隔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 = '$';

$("#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 = '$';

$("#tangyuan1").css("background","url("+ctxpath+"/img/baidu/baidu_tangyuan.png) "+count1+"px"+" 0px no-repeat");

}

正着挖(ˇ∀ˇ)：

倒着挖o(*￣︶￣*)o：

素材图片

今天的分享就到这里了，大家看完后学会了吗？

欢迎评论留言，提供建议和思路，如果觉得文章对您有用就加个关注啦~~