首頁 > web前端 > js教程 > 主體

js實現動態的「元宵節湯圓」特效(仿百度)

藏色散人
發布: 2022-02-13 09:30:54
轉載
2672 人瀏覽過

模仿百度首頁「元宵節湯圓」動圖:(js的定時任務:setInterval)

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

效果圖:

切圖位址:

https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png
登入後複製

頁面程式碼:


<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
    String ctxPath = request.getContextPath();
    request.setAttribute("ctxpath", ctxPath);//项目根路径
%>




<%--  --%>
   首页



汤圆我要正着挖(●ˇ∀ˇ●):
汤圆我要倒着挖o(* ̄︶ ̄*)o:
登入後複製

推薦學習:《javascript影片教學

以上是js實現動態的「元宵節湯圓」特效(仿百度)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!