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 ...
随机推荐
- 一步一步学Silverlight 2系列(21):如何在Silverlight中调用JavaScript
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...
- Oracle:imp导入imp-00000问题
现场环境:window2008 . oracle11.2g .客户端安装的是oracle10g一个简洁版 34M的. 在imp导入时,提示 Message 100 not found; No mes ...
- 【系列】 2-SAT
bzoj 1997 Planar 题目大意: 给一个存在曼哈顿回路的无向图,求该图是否为平面图 思路: 先把曼哈顿回路提出来,则剩下的边的两个端点若有$ABAB$的形式则这两条边必定一个在环外一个在环 ...
- 【USACO】 Balanced Lineup
[题目链接] 点击打开链接 [算法] 这是一道经典的最值查询(RMQ)问题. 我们首先想到线段树.但有没有更快的方法呢?对于这类问题,我们可以用ST表(稀疏表)算法求解. 稀疏表算法.其实也是一种动态 ...
- WebDev.WebServer40.EXE命令使用
"C:\Program Files (x86)\Common Files\microsoft shared\DevServer\10.0\WebDev.WebServer40.EXE&quo ...
- margin-----总结----解析逻辑
margin的解析逻辑 在 margin 中 top.right.bottom.left 的参考线并不一致为一类,而是分为了两类参考线,top 和 left 的参考线属于一类,right 和botto ...
- 【旧文章搬运】Windows句柄表格式
原文发表于百度空间,2009-02-28========================================================================== 句柄是Wi ...
- linux以行为单位进行读写操作
1 gets/fgets函数 char* fgets(char *restrict buf,int n,FILE *restrict fp) 参数1:存放读入串的缓冲区 参数2:表示读入的字符个数,最 ...
- ASP.NET Core MVC 2.x 全面教程_ASP.NET Core MVC 01. 创建项目 +项目结构和配置简介
新建项目:Tutotial.Web 解决方案名称可以把web去掉 视频里面把git这个选项勾选了.我就不勾选了 dotnet CLI创建项目 首先必须安装好了.net Core的SDK dotnet ...
- E20180403-hm
accompany vt. 陪伴,陪同; 附加,补充; 与…共存; 为…伴奏 synchronous adj. 同时存在[发生]的,同步的 asynchronous adj. 异步的; particu ...