js untuk melaksanakan kesan khas 'Lantern Festival Tangyuan' dinamik (meniru Baidu)-tutorial js-php.cn

js untuk melaksanakan kesan khas 'Lantern Festival Tangyuan' dinamik (meniru Baidu)

藏色散人

Lepaskan： 2022-02-13 09:30:54

ke hadapan

2853 orang telah melayarinya

Tiru animasi "Lantern Festival Tangyuan" di halaman utama Baidu: (tugas berjadual js: setInterval)

Prinsip: Gambar yang dipotong diperlukan dan gambar itu dibuat supaya kelihatan seperti gambar Bingkai demi bingkai dimainkan semula untuk membentuk animasi

Rendering:

Alamat pemotongan:

https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png

Salin selepas log masuk

Kod halaman:

<!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 = &#39;${ctxpath}&#39;;
    //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 = &#39;${ctxpath}&#39;;
    //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>

Salin selepas log masuk

Pembelajaran yang disyorkan: "tutorial video javascript"

Atas ialah kandungan terperinci js untuk melaksanakan kesan khas 'Lantern Festival Tangyuan' dinamik (meniru Baidu). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!