模仿百度首页“元宵节汤圆”动图：（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()",);

    setInterval("tangyuan1()",);

    //setInterval("indexChange()",1);

});

//汤圆 正着挖

var count = ;

function tangyuan(){

    count = count - ;

    if(count == -){

        count = ;

    }

    var ctxpath = '${ctxpath}';

    //url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)

    //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 = -;

function tangyuan1(){

    count1 = count1 + ;

    if(count1 == ){

        count1 = -;

    }

    var ctxpath = '${ctxpath}';

    //url(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;)

    //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(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;) -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(&quot;https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/img/1519708766000_4f5d68844a93b929405a11d217ef0bf5.png&quot;) -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>

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

  1. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  2. css模仿百度首页

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. JS实现可用滑块滑动的缓动图

    尝试模仿京东的"发现好货"模块的可用滑块滑动的缓动图 JS代码 function $(id) { return document.getElementById(id); } //缓 ...

  4. 使用 Vue.js 2.0+ Vue-resource 模仿百度搜索框

    使用 Vue.js 2.0 模仿百度搜索框 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  5. js将用户上传gif动图分解成多张帧图片

    js将用户上传gif动图分解成多张帧图片 写在前面 工作中遇到一个这么一个需求:这是一个多图上传的场景,如果用户上传选择多张图片,则上传后直接展示多张图片,如果上传的图片是gif动图,则需要分解这张动 ...

  6. js特效：鼠标滑过图片时切换为动图

    效果展示 事前准备 一张普通的静态图+与其对应的gif图. 实现思路 获取图片的src,改变其后缀,使其变成与之对应的gif图片.(很简单有木有= =) 具体实现 编写html代码 <div c ...

  7. js模仿京东首页的倒计时功能

    模仿京东首页的倒计时 我们学习了定时器,可以用定时器做一个倒计时,于是我模仿了京东首页倒计时. 先看看京东首页的倒计时. 思路: 如何倒计时? 给一个未来的时间.然后计算未来时间到现在的时间戳. 用定 ...

  8. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  9. html+css 百度首页练习

    这几天看完了<css权威指南>,写了个百度页面,不带js的纯静态,主要目的就是掌握页面布局,字体颜色之类的没有深究. 写完了觉得很简单,毕竟一开始觉得只要模仿的像就行,但是缩小了浏览器窗口 ...

随机推荐

  1. Repeater 中 OnItemCommand 用法

    <table> <asp:Repeater ID="rptList" runat="server"OnItemCommand="rp ...

  2. 看似简单!解读C#程序员最易犯的7大错误

    编程时犯错是必然的,即使是一个很小的错误也可能会导致昂贵的代价,聪明的人善于从错误中汲取教训,尽量不再重复犯错,在这篇文章中,我将重点介绍C#开发人员最容易犯的7个错误. 格式化字符串 在C#编程中, ...

  3. USACO 保护花朵 Protecting the Flowers, 2007 Jan

    Description 约翰留下了 N 只奶牛呆在家里,自顾自地去干活了,这是非常失策的.他还在的时候,奶牛像 往常一样悠闲地在牧场里吃草.可是当他回来的时候,他看到了一幕惨剧:他的奶牛跑进了他的花园 ...

  4. 手把手教你写带登录的NodeJS爬虫+数据展示

    其实在早之前,就做过立马理财的销售额统计,只不过是用前端js写的,需要在首页的console调试面板里粘贴一段代码执行,点击这里.主要是通过定时爬取https://www.lmlc.com/s/web ...

  5. React实现单例组件

    问题背景 在工作中遇到了这样一个场景,写了个通用的弹窗组件,却在同一个页面中多次使用了该组件.当点击打开弹窗时,可想而知,一次性打开了多个弹窗,而业务需求只需要打开一个. 我个人在解决问题过程中的一些 ...

  6. Android接口回调的理解

    1.各种理解 <1>说白了,就是拿到对象引用,调其方法 <2>实际上就是利用多态的方式调用而已 <3>其实很容易理解的,定义接口,然后提供一个外部的接口设置进去,然 ...

  7. 使用layer.tips实现鼠标悬浮时触发事件提示消息实现

    代码: <body> <label id="test" onmouseover="show('test')"> 你瞅啥!?过来试试! & ...

  8. 05 ADO.net

    ADO.NET就是一组类库 操作数据库用的.

  9. linux内存随笔

    内存在电脑中使用广泛,比如内存条内存.显卡显存.cpu缓存.raid卡缓存等,缓存就是数据交换的缓冲区(称作cache),缓存往往都是RAM(断电文件丢失),他们的读写速率非常高,用来帮助硬件更快的响 ...

  10. 洛谷10月月赛II

    #A: P4924 [1007]魔法少女小Scarlet 这道题考了矩阵旋转 其实很考验推公式的能力和代码能力 这里有个小技巧 可以设(x, y)为原点,然后去推公式,然后实际操作中横坐标加上x,纵坐 ...