tween.js下面的轮播（饿了么点餐的那种效果）
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
* {
margin:0px;
padding:0px;
}
#wrap {
width:200px;
height:200px;
position:absolute;
overflow:hidden;
}
#ul_box {
width:800px;
height:200px;
position:absolute;
list-style-type:none;
}
li {
float:left;
}
img {
width:200px;
}
</style>
</head>
<script src="tween.js"></script>
<body>
<div id="wrap">
<ul id="ul_box">
<li class="item">
<img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
<li class="item">
<img src="98ad3f445b051290c49c09a63bfb6e36.jpg" /> </li>
<li class="item">
<img src="aac3722ea3b9c114028d6f9efa8fccdf.jpg" /> </li>
<li class="item">
<img src="89948850c0b9d07866e026dfe6c6e7d7.jpg" /> </li>
</ul>
</div>
<script> var myUl= document.getElementById("ul_box");
var myLi = document.getElementsByClassName("item");
var t = 0;
var b = 0;//初始位置
var c = -200;
var d = 1000;
function lunbo() {
function run() {
t += 1;
myUl.style.left = Tween.Bounce.easeInOut(t, b, c, d) + "px";
if (t == d) {
clearInterval(timer);
t = 0;
b -= 200;
}
if (myUl.offsetLeft <-600) {
myUl.style.left = "0px";
b = 0;
} }
var timer = setInterval(run, 10);
}
var bo = setInterval(lunbo, 4000);
</script>
</body>
</html>
tween.js下面的轮播（饿了么点餐的那种效果）的更多相关文章
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 原生js实现无缝轮播
原生js实现无缝轮播 因为要做到无缝,所以就要把第一张图片和最后一张连接起来,在此处采用js克隆了第一张图片的节点,添加到最后,显示图片序号的小圆按钮也是使用js动态添加的. html部分 <d ...
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- Bootstrap的js插件之轮播(carousel)
轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
随机推荐
- I.MX6 AW-NB177NF WIFI 驱动移植问题
/******************************************************************************** * I.MX6 AW-NB177NF ...
- saltstack自动化运维快速入门
saltstack自动化运维快速入门 关于saltstack 这个软件是干啥的 我这里就不介绍了 只是简单的说下是干啥的 网上的说法是 它是func的强化版本+ puppet的精简版 关于puppet ...
- String、StringBuffer和StringBuilder有什么区别？
1. String 类 String的值是不可变的,这就导致每次对String的操作都会生成新的String对象,不仅效率低下,而且大量浪费有限的内存空间.String a = "a&quo ...
- GCC在C语言中内嵌汇编 asm __volatile__
2012-11-26 22:20 17958人阅读 评论(2) 收藏 举报 分类: linux(59) 架构管理(24) C/C++(59) 目录(?)[+] 在内嵌汇编中,可以将C语言表达式 ...
- 机器学习--DIY笔记与感悟--②决策树（1）
在完成了K临近之后,今天我们开始下一个算法--->决策树算法. 一.决策树基础知识 如果突然问你"有一个陌生人叫X,Ta今天需要带伞吗?", 你一定会觉得这个问题就像告诉你& ...
- bzoj 3992: [SDOI2015]序列统计【原根+生成函数+NTT+快速幂】
还是没有理解透原根--题目提示其实挺明显的,M是质数,然后1<=x<=M-1 这种计数就容易想到生成函数,但是生成函数是加法,而这里是乘法,所以要想办法变成加法 首先因为0和任何数乘都是0 ...
- bzoj 3872: [Poi2014]Ant colony【树形dp+二分】
啊我把分子分母混了WA了好几次-- 就是从食蚁兽在的边段成两棵树,然后dp下去可取的蚂蚁数量区间,也就是每次转移是l[e[i].to]=l[u](d[u]-1),r[e[i].to]=(r[u]+1) ...
- IT兄弟连 JavaWeb教程 HTTP协议
超文本传输协议(HTTP,Hypertext Transfer Protocol)是互联网上应用最为广泛的一种网络协议.所有的Web文件都必须遵守这个标准.设计HTTP最初的目的是为了提供一种发布和接 ...
- Luogu P1552 [APIO2012]派遣【左偏树】By cellur925
题目传送门 $Chat$ 哈哈哈我xj用dfs序乱搞竟然炸出了66分....(其实还是数据水,逃) $Sol$ 首先我们应该知道,一个人他自己的满意度与他子树所有节点的领导力是无关的,一个人的满意度受 ...
- S.O.L.I.D: PHP 面向对象设计的五个基准原则
S.O.L.I.D 是首个 5 个面向对象设计 (OOD) 准则的首字母缩写,这些准则是由 Robert C. Martin 提出的,他更为人所熟知的名字是 Uncle Bob. 这些准则使得开发出易 ...