<!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="width: 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; width: 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>
浙公网安备 33010602011771号