首页 > 代码库 > javascript 列表定时滚动效果
javascript 列表定时滚动效果
HTML结构：
<div style="width:200px;height:100px;overflow:hidden;border:1px solid #ddd;margin:20px auto;"> <ul id="list"> <li><a href="#">2222222222222222222222222</a></li> <li><a href="#">3333333333333333333333333</a></li> <li><a href="#">22222222222222222222222222</a></li> <li><a href="#">22222222222223222222222222</a></li> <li><a href="#">22222222222222422222222222</a></li> <li><a href="#">2222222222222252222222222</a></li> <li><a href="#">22222222225555552222222222</a></li> <li><a href="#">22222222222253333333222222</a></li> <li><a href="#">22222222277777777222222</a></li> </ul> </div>
js：
/* * 列表定时滚动效果(javascript) * @listId :滚动列表ID * @listTagName :滚动元素 * @scrollNum :设置滚动元素数量 * @speed : 滚动速度 */ function fnScrollList(){ this.init.apply(this,arguments); } fnScrollList.prototype = { init:function(listId,TagName,scrollNum,speed){ var _this = this; this.oList = this.$$(listId); this.scrollTimer = null; this.speed = speed || 1000; this.scrollNum = scrollNum || 1; this.TagName =TagName; this.distance = this.oList.getElementsByTagName(TagName)[0].offsetHeight * this.scrollNum;//列表移动距离 this.oList.style.marginTop = 0 + "px"; this.oList.onmouseover = function(){ _this.pause(); } this.oList.onmouseout = function(){ _this.scrollTimer= setTimeout(function(){ _this.play(); },_this.speed); } this.play(); }, play:function(){ var _this = this; var options = {‘marginTop‘:‘-‘+_this.distance}; _this.anim(_this.oList,options,function(){ //回调函数，移动列表元素 for(var i = 0,j = 0;i<_this.scrollNum;i++){ var node = _this.oList.getElementsByTagName(_this.TagName)[j]; if(_this.TagName == "tr"){ _this.oList.getElementsByTagName(‘tbody‘)[0].appendChild(node); }else{ _this.oList.appendChild(node); } } _this.oList.style.marginTop = "0px"; }); _this.scrollTimer= setTimeout(function(){ _this.play(_this.distance); },_this.speed); }, pause:function(){ clearTimeout(this.scrollTimer); }, //动画函数 anim:function(oElement,oAttr,fnCallback){ var _this = this; clearInterval(oElement.timer); oElement.timer = setInterval(function(){ var bStop = true; for(var property in oAttr){ var iCur = parseFloat(_this.css(oElement, property)); //获取当前位置属性值 var iSpeed = (oAttr[property] - iCur) / 5; //移动进度 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); if (iCur != oAttr[property]) { //如果当前数值不等于目标数值，则数值递增 bStop = false; _this.css(oElement, property, iCur + iSpeed); } } if(bStop){ clearInterval(oElement.timer); fnCallback && fnCallback.apply(_this, arguments); } },50); }, //处理样式函数 css:function(oElement, attr, value){ if (arguments.length == 2) { return oElement.currentStyle ? oElement.currentStyle[attr] : getComputedStyle(oElement, null)[attr]; } else if (arguments.length == 3) { switch (attr) { case "top": case "left": case "marginTop": oElement.style[attr] = value + "px"; break; default: oElement.style[attr] = value; break; } } }, $$:function(o){ if(o){ return document.getElementById(o); } } };
函数调用：
var list = new fnScrollList(‘list‘,‘li‘,2,2000);
效果：
<style></style>
| 站点名称 | AQI | 类别 |
|---|
| 工业园区1 | 123 | 轻度污染 |
| 工业园区2 | 123 | 轻度污染 |
| 工业园区3 | 123 | 轻度污染 |
| 工业园区4 | 123 | 轻度污染 |
| 工业园区5 | 123 | 轻度污染 |
| 工业园区6 | 123 | 轻度污染 |
| 工业园区7 | 123 | 轻度污染 |
| 工业园区8 | 123 | 轻度污染 |
- 2222222222222222222222222
- 3333333333333333333333333
- 22222222222222222222222222
- 22222222222223222222222222
- 22222222222222422222222222
- 2222222222222252222222222
- 22222222225555552222222222
- 22222222222253333333222222
- 22222222277777777222222
demo：
demo.zip
javascript 列表定时滚动效果
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。