常见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 相关文章推荐
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
Mar 12 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
静态页面html中跳转传值的JS处理技巧
Jun 22 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
JS常见面试试题总结【去重、遍历、闭包、继承等】
Aug 27 Javascript
深入理解javascript中的this
Feb 08 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
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
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
JS实现图片预加载无需等待
2012/12/21 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jQuery循环滚动新闻列表示例代码
2014/06/17 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
javascript的document中的动态添加标签实现方法
2016/10/24 Javascript
jQuery UI Grid 模态框中的表格实例代码
2017/04/01 jQuery
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
Python入门篇之数字
2014/10/20 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Python执行时间的计算方法小结
2017/03/17 Python
简单了解OpenCV是个什么东西
2017/11/10 Python
Django开发中复选框用法示例
2018/03/20 Python
Python基于多线程操作数据库相关问题分析
2018/07/11 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
python-视频分帧&amp;多帧合成视频实例
2019/12/10 Python
Python新手学习装饰器
2020/06/04 Python
Python获取android设备cpu和内存占用情况
2020/11/15 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
线程同步的方法
2016/11/23 面试题
公司领导推荐信
2013/11/12 职场文书
创建卫生先进单位实施方案
2014/03/10 职场文书
售后服务承诺书范文
2014/03/26 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年纠风工作总结
2014/12/08 职场文书
教师廉洁自律个人总结
2015/02/10 职场文书
团支部书记竞选稿
2015/11/21 职场文书
高一英语教学反思
2016/03/03 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python