<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .Scroller { width: 400px; height: 50px; border: solid 1px #000000; line-height: 50px; padding: 0px 10px; } .Scroller * { margin: 0px; padding: 0px; } .ScrollMid { float: left; } .ScrollMid ul { width:2800px; border: red solid 1px; float: left; } .ScrollMid li { float: left; width: 390px; list-style: none; padding-left: 10px; } </style> </head> <body> <div id="idScrollerDiv" class="Scroller"> <div style=" 1600px"> <div id="idScrollMid" class="ScrollMid"> <ul> <li>热点新闻1</li> <li>热点新闻2</li> <li>热点新闻3</li> <li>热点新闻4</li> <li>热点新闻5</li> <li>热点新闻6</li> </ul> </div> </div> </div> <div id="writeDiv" style="word-wrap: break-word; 1000px"> </div> </body> </html> <script type="text/javascript"> var $ = function (id) { return typeof id == "string" ? document.getElementById(id) : id; }; //创建实例 var Class = { //创建一个方法 create: function () { //返回一个方法，对象 return function () { this.initialize.apply(this, arguments); } } }; //继承 Object.extend = function (destination, source) { for (var property in source) { destination[property] = source[property]; } return destination; } //绑定事件 function addEventHandler(oTarget, sEventType, fnHandler) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); } else if (oTarget.attachEvent) { oTarget.attachEvent("on" + sEventType, fnHandler); } else { oTarget["on" + sEventType] = fnHandler; } } //通过调用类的方法创建类 var Scroller = Class.create(); //通过prototype属性为已有的类定义新方法 Scroller.prototype = { //构造函数 initialize: function (idScrollerDiv, idScrollList, options) { var oThis = this, oScrollerDiv = $(idScrollerDiv), oScrollList = $(idScrollList); //oScrollerDiv:滚动区域，oScrollList:滚动列表 this.SetOptions(options); //滚动参数赋值 this.Side = this.options.Side || ["up"]; //方向 this.scrollerDiv = oScrollerDiv; //滚动区域对象 this.speed = this.options.Speed; //速度 this.timer = null; //时间 this.pauseHeight = 0; //定高（隔多高滚动一次） this.pauseWidth = 0; //定宽（隔多宽滚动一次） this.pause = 0; //定高（宽） this.side = 0; //参数 //滚动条距离 //用于上下滚动 this.heightScrollerDiv = parseInt(oScrollerDiv.style.height) || oScrollerDiv.offsetHeight; //滚动区域的高度 this.heightList = oScrollList.offsetHeight; //滚动列表的高度 //用于左右滚动 this.widthScrollerDiv = parseInt(oScrollerDiv.style.width) || oScrollerDiv.offsetWidth; //滚动区域的宽度 this.widthList = oScrollList.offsetWidth; //滚动列表的宽度 //设置滚动区域滚动条样式 oScrollerDiv.style.overflow ="scroll"; oScrollList.appendChild(oScrollList.cloneNode(true)); oScrollList.appendChild(oScrollList.cloneNode(true)); oScrollList.appendChild(oScrollList.cloneNode(true)); //绑定事件 addEventHandler(oScrollerDiv, "mouseover", function () { oThis.Stop(); }); addEventHandler(oScrollerDiv, "mouseout", function () { oThis.Start(); }); this.Start(); }, //参数赋值 SetOptions: function (options) { this.options = { Step: 1, //每次滚动Px值 Speed: 20, //滚动停留时间 Side: ["up"], //方向 PauseHeight: 0, //各多高滚动一次 PauseWidth: 0, //隔多宽滚动一次 PauseStep: 1000//停顿时间(PauseHeight或PauseWidth大于0该参数才有效) } Object.extend(this.options, options || {}); }, //上下滚动 ScrollUpDown: function () { this.pause = this.pauseHeight; //通过修改滚动区域的滚动条高度实现滚动效果（参数：滚动区域的滚动条距离，滚动区域的高度，滚动列表，滚动参数(隔多高滚动一次)） this.scrollerDiv.scrollTop = this.GetScroll(this.scrollerDiv.scrollTop, this.heightScrollerDiv, this.heightList, this.options.PauseHeight); this.pauseHeight = this.pause; oThis = this; this.timer = window.setTimeout(function () { oThis.Start(); }, this.speed); }, //左右滚动 ScrollLeftRight: function () { this.pause = this.pauseWidth; this.scrollerDiv.scrollLeft = this.GetScroll(this.scrollerDiv.scrollLeft, this.widthScrollerDiv, this.widthList, this.options.PauseWidth); this.pauseWidth = this.pause; oThis = this; this.timer = window.setTimeout(function () { oThis.Start(); }, this.speed); }, //调转方向 Turn: function () { this.Side.push(this.Side.shift().toLowerCase()); }, //获取滚动数据(scrollDistance：滚动条距离，scrollDivDistance：滚动区域高度、宽度，pauseDistance：隔多宽（高）滚动一次) GetScroll: function (scrollDistance, scrollDivDistance, listDistance, pauseDistance) { //滚动变化量*方向（1、-1） var iStep = this.options.Step * this.side; //正方向 if (this.side > 0) { //listDistance * 2（因为chonNode()方法将滚动列表复制了两遍） if (scrollDistance >= (listDistance * 2 - scrollDivDistance)) { scrollDistance -= listDistance; } } else { if (scrollDistance <= 0) { scrollDistance += listDistance; } } //重新赋值 this.speed = this.options.Speed; if (pauseDistance > 0) { if (Math.abs(this.pause) >= pauseDistance) { this.speed = this.options.PauseStep; this.pause = iStep = 0; this.Turn(); } else { this.pause += iStep; } } return (scrollDistance + iStep); //滚动距离+1 递增 }, //开始滚动 Start: function () { //方向设置 switch (this.Side[0].toLowerCase()) { case "right": if (this.widthList < this.widthScrollerDiv) return; this.side = -1; this.ScrollLeftRight(); break; case "left": if (this.widthList < this.widthScrollerDiv) return; this.side = 1; this.ScrollLeftRight(); break; case "down": if (this.heightList < this.heightScrollerDiv) return; this.side = -1; this.ScrollUpDown(); break; case "up": default: if (this.heightList < this.heightScrollerDiv) return; this.side = 1; this.ScrollUpDown(); } }, //停止滚动 Stop: function () { clearTimeout(this.timer); } }; window.onload = function () { new Scroller("idScrollerDiv", "idScrollMid", { Side: ["left"], PauseHeight: 50, PauseWidth: 400 }); } function wr(text, bo) { if (bo) { $("writeDiv").innerHTML += "_" + text; } else { $("writeDiv").innerHTML = "_" + text; } }; </script> <script> var array = ['1', '2']; // alert(array.forEach); </script>
