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

221 阅读 0 评论 146 点赞

我是靠谱客的博主诚心汉堡，最近开发中收集的这篇文章主要介绍常见JS效果之图片减速度滚动实现代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

复制代码代码如下:

 
<!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://www.uoften.com/uploadfile/2018/0411/20180411124722760.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
</div> 
<span class="price">会员价：￥288.00</span> 
</li> 
<li> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124722569.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
</div> 
<span class="price">会员价：￥288.00</span> 
</li> 
<li> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124722671.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
</div> 
<span class="price">会员价：￥288.00</span> 
</li> 
<li> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124722495.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
</div> 
<span class="price">会员价：￥288.00</span> 
</li> 
<li> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124722786.jpg" /> 
<div class="info"> 
兵尼兔 环保大包围专车专用脚垫 米色（专车专用，仅支持在线支付）版型精准 大包围 
</div> 
<span class="price">会员价：￥288.00</span> 
</li> 
<li> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411124723515.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> 