Heim > Artikel > Web-Frontend > js zur Implementierung dynamischer „Laternen Festival Tangyuan'-Spezialeffekte (Imitierung von Baidu)
Imitieren Sie die Animation „Laternenfest Tangyuan“ auf Baidus Homepage: (js geplante Aufgabe: setInterval)
Prinzip: Es wird ein ausgeschnittenes Bild benötigt, und durch kontinuierliche Positionierung wird das Bild wie ein Bild für Bild abgespielt, wodurch ein Bild entsteht Animation
Rendering:
Schnittadresse:
https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
Seitencode:
<!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>
Empfohlenes Lernen: „Javascript-Video-Tutorial“
Das obige ist der detaillierte Inhalt vonjs zur Implementierung dynamischer „Laternen Festival Tangyuan'-Spezialeffekte (Imitierung von Baidu). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!