常见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 可以拖动的DIV(二)
Jun 26 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
Jun 12 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
Feb 19 Javascript
详解Node.js 命令行程序开发教程
Jun 07 Javascript
js读取本地文件的实例
Dec 22 Javascript
JavaScript函数apply()和call()用法与异同分析
Aug 10 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
javascript获取元素的计算样式
May 24 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
PHP和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
js DOM的学习笔记
2011/12/22 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
跟我学习javascript的prototype原型和原型链
2015/11/18 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
jquery实现左右轮播图效果
2017/09/28 jQuery
Vuex中mutations与actions的区别详解
2018/03/01 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
详细解读Python的web.py框架下的application.py模块
2015/05/02 Python
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
python读写LMDB文件的方法
2018/07/02 Python
Python reshape的用法及多个二维数组合并为三维数组的实例
2020/02/07 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
西班牙在线宠物食品和配件商店:bitiba
2019/10/11 全球购物
教师岗位职责范本
2013/12/29 职场文书
马智宇结婚主持词
2014/04/01 职场文书
农村党支部书记四风问题个人对照检查材料
2014/09/21 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年班组工作总结
2014/11/20 职场文书
运动会宣传语
2015/07/13 职场文书
国家助学金受助感言
2015/08/01 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL