常见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://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>

赞 (0)

相关推荐

  • 一些收集整理非常不错的JS效果代码

    按A就会跳转到练习的网页,请按A [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 类似与QQ的好友/黑名单之类的树型菜单 New Document if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuI

  • js实现超酷的照片墙展示效果图附源码下载

    js实现超酷的照片墙展示效果图附源码下载

    这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 查看演示 下载源码 HTML 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3

  • 友情链接横向文字上下间隙循环滚动JS效果

    仿qq频道上下单行多条滚动js效果代码,可用于新闻,友情链接上下间隙滚动 #nav { MARGIN: 7px auto 0px; HEIGHT: 117px } #nav #hotnews { BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px } #Scroll { CLEAR: both; BORDER-RIGHT: #cdc9ca 1px solid; BORDER-TOP: #cdc9ca 1px solid; PADDING-LEFT: 100px; FON

  • 自己写了一个展开和收起的多更能型的js效果

    自己写了一个展开和收起的多更能型的js效果

    先来看看效果: 具体的功能是: 1.页面上面最多只有一个是显示全部内容的. 2.当自己处于全部显示的时候,点击自己的收起,自己收起. 3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开" 而被点击的选项则内容全部显示,"展开"变为"收起" ================================================= 部分代码: =====================

  • 常见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 "宋体"; } .

  • JS实现单张或多张图片持续无缝滚动的示例代码

    背景: 想要实现图片持续滚动,既然使用js,就千万不要加css动画.过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符. 原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1.必须是没有设置过渡动画的,2.重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化. 实

  • jQuery动画效果实现图片无缝连续滚动

    jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • jQuery图片轮播滚动切换代码分享

    jQuery图片轮播滚动切换代码分享

    本文实例讲述了jQuery图片轮播滚动切换特效.分享给大家供大家参考.具体如下: jQuery图片轮播滚动切换代码是一款简单的jquery四张图片轮播滚动切换效果代码,实现过程很简单. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" type="text/css" h

  • 基于JS实现新闻列表无缝向上滚动实例代码

    当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

  • JS 实现可停顿的垂直滚动实例代码

    var ScrollMiddle = { 'Odiv':document.getElementById('comment'), // 目标DOM 'Oli': document.getElementById('comment').getElementsByTagName('li'), 'times':30, // 配置滚动时间 'delay':1000, // 配置暂停的时间 inint:function(){ this.size = this.Oli.length; this.height =

  • Javascript实现图片不间断滚动的代码

    蛮优秀的一段效果代码,可以上下左右滚动,收藏了!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=

  • JS实现简单加减购物车效果

    JS实现简单加减购物车效果

    本文实例为大家分享了JS实现简单加减购物车的具体代码,供大家参考,具体内容如下 1.书写input输入框作为加减实现的效果. 2.加减按钮用button按钮来实现 3.利用js控制i的值作为输入框中的值. 实现的效果: 完整代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body{

  • js+cavans实现图片滑块验证

    本文实例为大家分享了js+cavans实现图片滑块验证的具体代码,供大家参考,具体内容如下 js已封装好,拿来即用,兼容pc端和移动端, 效果: 移动端: pc端: 原理就不解释了,我之前的博客已经说过,只不过这个版本是结合了canvas实现,又兼容了pc端,直接拿代码就能用了. 代码:html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • js实现网页图片轮换播放

    js实现网页图片轮换播放

    本文实例为大家分享了js实现网页图片轮换播放的具体代码,供大家参考,具体内容如下 1.实现效果如下: 2.实现功能: (1)点击左右箭头之后,下面显示的图片会换成对应的上一张或下一张图片 (2)点击导航的某一张图片时,下面的就会显示对应的图片,而且再次点击上一张或者下一张时会显示对应的图片 (3)图片的地址可以来自网络上,也可以是自己的服务器发送过来的字符串数组. 3.实现代码: (1)目录结构: (2)index.html的代码内容如下: <!DOCTYPE html PUBLIC "-

随机推荐