常见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模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
JavaScript学习总结之JS、AJAX应用
Jan 29 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
Oct 10 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue项目引入字体.ttf的方法
Sep 28 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
vue+高德地图实现地图搜索及点击定位操作
Sep 09 Javascript
原生JS实现九宫格抽奖
Sep 13 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
phpmail类发送邮件函数代码
2012/02/20 PHP
PHP连接access数据库
2015/03/27 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
JavaScript从0开始构思表情插件
2016/07/26 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
js防抖和节流的深入讲解
2018/12/06 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
python 多线程串行和并行的实例
2019/02/22 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
Django项目中实现使用qq第三方登录功能
2019/08/13 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
开学季活动策划方案
2014/02/28 职场文书
干部选拔任用方案
2014/05/26 职场文书
应届生求职信
2014/05/31 职场文书
工作作风整顿个人剖析材料
2014/10/11 职场文书
银行员工考核评语
2014/12/31 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
好人好事新闻稿
2015/07/17 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python