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 ...
随机推荐
- WCF寄宿到Windows Service[1]
WCF寄宿到Windows Service 返回 在前面创建一个简单的WCF程序,我们把WCF的服务寄宿到了Host这个控制台项目中了.下面将介绍如何把WCF的服务寄宿到Windows服务中(源代码) ...
- [Selenium] Android HTML5 中 Application Cache
HTML5 中引入了 Application Cache,这意味着 Web 应用程序可以被缓存到本地,且可在没有网络的情况下也能访问该 Web 应用程序 Application Cache 在以下3个 ...
- macbook pro上安装虚拟机
第一步:下载MacHunter的app应用商店 第二步:在MacHunter内下载Parallels Desktop虚拟机 第三步:如果在这个商店下载不下来,在网络资源上直接下载Parallels D ...
- AutoIt: send 命令 VS ControlClick的使用
2008年的时候第一次接触AutoIt,当时觉得局限性太多了,就不想学,觉得把Watir,Ruby搞好就行了. 最近一段时间比较闲,发现自己对GUI的自动化操完全是短板,就把AutoIt重新拾起来了. ...
- fastText入门
简介fastText是Facebook AI Research在2016年提出的文本分类和词训练的工具.它最大的特点:模型非常简单,训练速度快,并且能够达到与深度学习旗鼓相当的精度. 最近在做一个给微 ...
- 【前端】Nodejs给没有引号的json数据添加引号
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/node_json.html 我们经常会遇到一些json数据需要放到json文件中,然后动态加载的场景. 但是也经常 ...
- 微信小程序服务类目大坑:特殊行业服务类目所需资质材料
作为一个技术开发人员,遇到特殊行业服务类目所需资质材料,只能叫苦连天了,妈的,这个不是技术可以解决的问题,如果技术可以解决的问题都不是问题. 百牛信息技术bainiu.ltd整理发布于博客园 特殊行业 ...
- 详细的Ajax使用
1. ajax对xml的接收和处理 xml主要作用: 主要保存和传输数据 1. xml文档结构 dom操作xml getElementsByTagName(); //根据标签名获取元素 childNo ...
- vue+webpack 打包文件 404 页面空白
最近用vue-cli+vue-router+webpack建立项目,其中的遇到的三个问题,整理如下: vue-cli+ webpack 建立的项目,cnpm run build 打包项目之后,需要放在 ...
- Cardboard对像的公共方法与属性
一. public Pose3D EyePose(Eye eye)/// The transformation from head to eye. 获取眼睛在头部坐标系中的局部transform: ...