js实现动态的“元宵节汤圆”特效（仿百度）-js教程-PHP中文网

首页

web前端

js教程

js实现动态的“元宵节汤圆”特效（仿百度）

藏色散人

Feb 13, 2022 am 09:30 AM

js 元宵节

模仿百度首页“元宵节汤圆”动图：（js的定时任务：setInterval）

原理：需要一张切图，通过不断定位使得图片就像一帧一帧的图片在播放从而形成了动画

效果图：

切图地址：

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);//项目根路径
%>
<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>

登录后复制

推荐学习：《javascript视频教程》

以上是js实现动态的“元宵节汤圆”特效（仿百度）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1660

CakePHP 教程

1416

Laravel 教程

1310

PHP教程

1260

C# 教程

1233

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

蛋仔派对圆圆子重返蛋仔岛：元宵佳节上岛团圆 Feb 23, 2024 pm 06:16 PM

元宵佳节当然要上岛团圆啦，蛋仔派对特意为大家准备了多个元宵节活动，包括妙妙新店筹备、团圆福利节、欢闹元宵、元宵节盲盒小铺限时折扣返场、美食加工厂蛋宅大院上线等，一起来看看本次的活动详情吧。蛋仔派对圆圆子重返蛋仔岛：元宵佳节上岛团圆妙妙新店筹备活动时间:2月22日12:00-2月29日23:59活动范围:全服玩家活动内容:打菜侠妙妙正在蛋仔岛上筹备新店铺，帮助妙妙完成筹备任务，即可在3月1日店铺开业后获得稀有配饰。3月1日，蛋仔们也可通过活动免费获取外观，

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

See all articles

js实现动态的“元宵节汤圆”特效（仿百度）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题