常见JS效果之图片减速度滚动实现代码


Posted in Javascript onDecember 08, 2011
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312" /> 
<title>图片减速度滚动(by rentj1@163.com;)</title> 
<style> 
ul{ margin:0; padding:0} 
ul{ list-style:none;} 
body{font:12px/1.2 "宋体"; } 
.scroll_box{ position:relative; height:164px; width:766px; border:1px solid #efefef; overflow:hidden;} 
.scroll_box .list{ overflow:hidden; zoom:1; position:absolute;} 
.scroll_box .list li{ width:235px; height:164px; padding:0 10px; text-align:center; float:left;} 
.scroll_box .list .info{ line-height:1.5} 
</style> 
</head> 
<body> 
<div class="scroll_box" id="container"> 
<ul class="list" id="content"> 
<li> 
<img src="http://img14.360buyimg.com/n4/4587/cd8a8a76-24f4-44d8-876b-12d78cbae588.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
<li> 
<img src="http://img11.360buyimg.com/n4/309/9230eaef-021c-447d-a64b-51ce698822ef.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
<li> 
<img src="http://img10.360buyimg.com/n4/8792/7691b514-a0b3-469e-8a2b-37b219ebc490.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
<li> 
<img src="http://img12.360buyimg.com/n4/285/c675cbb0-3a6f-4703-95fb-e75a7c90b48e.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
<li> 
<img src="http://img12.360buyimg.com/n4/1957/22aa7c6d-4b70-49b8-a985-678b1d0e3781.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
<li> 
<img src="http://img10.360buyimg.com/n4/2314/cf09b35a-eb6d-4a4f-a4dd-3301bfafef99.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色(专车专用,仅支持在线支付)版型精准 大包围 
</div> 
<span class="price">会员价:¥288.00</span> 
</li> 
</ul> 
</div> 
<script> 
untils = { 
getComputedStyle: function(elem,syle){ 
var computedStyle = document.defaultView 
&& document.defaultView.getComputedStyle 
&& document.defaultView.getComputedStyle(elem,null); 
if(!computedStyle){ 
computedStyle = elem.currentStyle 
} 
return computedStyle[syle] 
}, 
setStyle: function(elem, name,val){ 
elem.style[name] = val; 
}, 
get: function(id){ 
document.getElementById(id) 
} 
} 
function ScrollSlider(container, content){ 
var clone = content.cloneNode(true); 
var initcss= "left:0; top:0"; 
var contentHeight = content.offsetHeight; 
var containerHeight = container.clientHeight; 
clone.id = "content-clone"; 
container.appendChild(clone); 
clone.setAttribute("cssText", initcss); 
content.setAttribute("cssText", initcss); 
clone.style.marginTop = contentHeight+"px"; 
this.content = content; 
this.clone = clone; 
this.container = container; 
this.containerHeight = containerHeight; 
this.contentHeight = contentHeight; 
} 
ScrollSlider.prototype = { 
start: function(delay){ 
var _this = this; 
clearInterval(_this.timer); 
_this.timer = setInterval(function(){ 
_this.scroll(); 
},delay); 
}, 
scroll: function(){ 
var marginTop = parseInt(untils.getComputedStyle(this.content, "marginTop")); 
var offsetTop = this.contentHeight; 
if(isNaN(marginTop))return; 
if( -marginTop >= this.contentHeight){ 
marginTop = this.contentHeight; 
} 
if(marginTop > 0){ 
offsetTop = -offsetTop; 
} 
this.move(marginTop, offsetTop); 
}, 
move: function(marginTop, offsetTop){ 
var s = this.containerHeight, s1 = 0, _this = this, m = 0; 
var timer = setInterval(function(){ 
var speed = (s-s1)/8; 
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 
s1 += speed; 
m = marginTop - s1; 
untils.setStyle(_this.content, "marginTop", m + "px"); 
untils.setStyle(_this.clone, "marginTop", (m + offsetTop)+"px"); 
if(s-s1 <= 0){ 
clearInterval(timer); 
} 
},30); 
} 
}; 
var container = document.getElementById("container") 
var content = document.getElementById("content") 
var xx = new ScrollSlider(container, content); 
xx.start(1000*3); 
/* 
//s=1/2 * at^2 
//s (att)/2 
//0<s<164 
0,-164,-328,164,0 
328,164,0,-164,-328,164,0 
*/ 
</script> 
</body> 
</html>
Javascript 相关文章推荐
js之WEB开发调试利器:Firebug 下载
Jan 13 Javascript
js 通用订单代码
Dec 23 Javascript
标题过长使用javascript按字节截取字符串
Apr 24 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
微信小程序pinker组件使用实现自动相减日期
May 07 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
JQuery循环滚动图片代码
Dec 08 #Javascript
Javascript类定义语法,私有成员、受保护成员、静态成员等介绍
Dec 08 #Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
Dec 08 #Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 #Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 #Javascript
5个javascript的数字格式化函数分享
Dec 07 #Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 #Javascript
You might like
php简单实现无限分类树形列表的方法
2015/03/27 PHP
thinkphp项目如何自定义微信分享描述内容
2017/02/20 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
通过命令行生成vue项目框架的方法
2017/07/12 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue的基本用法与常见指令
2017/08/15 Javascript
vue脚手架搭建过程图解
2018/06/06 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
解决Vue打包上线之后部分CSS不生效的问题
2019/11/12 Javascript
Vue-cli打包后部署到子目录下的路径问题说明
2020/09/02 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Django自定义分页效果
2017/06/27 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
Python实现数值积分方式
2019/11/20 Python
Python如何根据时间序列数据作图
2020/05/12 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
10个顶级Python实用库推荐
2021/03/04 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
财务检查整改报告
2014/11/06 职场文书
2014年实习期工作总结
2014/11/27 职场文书
房屋维修申请报告
2015/05/18 职场文书
详解MySQL数据库千万级数据查询和存储
2021/05/18 MySQL
python开发的自动化运维工具ansible详解
2021/08/07 Python
MySQL中正则表达式(REGEXP)使用详解
2022/07/07 MySQL