首页
导航
博客
电子书
算法
众创
代码
随贴
关于我们
您好,欢迎来到码863代码分享网! 请
[登录]
/
[注册]
搜 索
产品图片滚动减速效果,减速翻转效果,Sliderby 112738102qq.com
编辑
原生js写法
代码正文
双击正文可选择全部
1[代码][javascript]
尝试一下
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>产品图片滚动减速效果,减速翻转效果,Slider(by 112738102@qq.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 条评论
发布评论
全部评论
最新
/
最热
暂无评论
加载更多
CopyRight 2002~2023 精通2100网 联系邮箱:qqtxt@163.com
版权所有:精通2100网
湘ICP备2023018646号-1
MYSQl共执行 3 个查询,用时 0.0036599636077881 秒,PHP脚本用时 0.006090 秒,占用内存 0.516 MB,Gzip 已启用