常见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 相关文章推荐
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
深入理解javaScript中的事件驱动
May 21 Javascript
Javascript基础知识盲点总结之函数
May 15 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
浅谈开发eslint规则
Oct 01 Javascript
微信小程序实现多选功能
Nov 04 Javascript
vue权限问题的完美解决方案
May 08 Javascript
countUp.js实现数字动态变化效果
Oct 17 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
javascript记录文本框内文字个数检测文字个数变化
2014/10/14 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jquery实现可点击伸缩与展开的菜单效果代码
2015/08/31 Javascript
浅析script标签中的defer与async属性
2016/11/30 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
详解redux异步操作实践
2018/08/15 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
Python内置函数reversed()用法分析
2018/03/20 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
Python初学者常见错误详解
2019/07/02 Python
Python中拆分字符串的操作方法
2019/07/23 Python
python判断是空的实例分享
2020/07/06 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
伦敦的高级牛仔布专家:Trilogy
2018/08/06 全球购物
金融学专科生自我鉴定
2014/02/21 职场文书
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
主题班会演讲稿
2014/05/22 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
党员民主生活会整改措施
2014/09/26 职场文书
送达通知书
2015/04/25 职场文书
刮痧观后感
2015/06/05 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript