怎么用js代碼實(shí)現(xiàn)動態(tài)的元宵節(jié)湯圓特效

發(fā)布時間：2022-02-14 09:08:33 來源：億速云閱讀：140 作者：iii 欄目：web開發(fā)

本文小編為大家詳細(xì)介紹“怎么用js代碼實(shí)現(xiàn)動態(tài)的元宵節(jié)湯圓特效”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么用js代碼實(shí)現(xiàn)動態(tài)的元宵節(jié)湯圓特效”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

原理：需要一張切圖，通過不斷定位使得圖片就像一幀一幀的圖片在播放從而形成了動畫

效果圖：

切圖地址：

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);//項(xiàng)目根路徑
%>
<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
    // 定時任務(wù),每隔100ms執(zhí)行一次函數(shù)
    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="團(tuán)團(tuán)圓圓樂元宵">
    </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="團(tuán)團(tuán)圓圓樂元宵">
    </body>
</html>

讀到這里，這篇“怎么用js代碼實(shí)現(xiàn)動態(tài)的元宵節(jié)湯圓特效”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

怎么用js代碼實(shí)現(xiàn)動態(tài)的元宵節(jié)湯圓特效

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽