Javascript无缝左右滚动

最新推荐文章于 2023-11-10 12:46:32 发布

weixin_30326745

最新推荐文章于 2023-11-10 12:46:32 发布

阅读量59

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/cloudgamer/archive/2008/01/15/1040408.html

本文介绍了一种使用JavaScript实现的自定义滚动条效果的方法。通过克隆内容并结合鼠标悬停事件来控制滚动行为，实现了平滑且响应式的左右滚动功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

</head>

<body>

var $ = function (id)

{

return "string" == typeof id ? 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();

Scroller.prototype =

{

initialize: function(idScroller, idScrollMid, idScrollLeft, idScrollRight, options)

{

var oScroll = this, oScroller = $(idScroller), oScrollMid = $(idScrollMid);

this.widthScroller = oScroller.offsetWidth;

this.widthList = oScrollMid.offsetWidth;

if(this.widthList <= this.widthScroller) return;

oScroller.style.overflow = "hidden";

oScrollMid.appendChild(oScrollMid.cloneNode(true));

this.oScroller = oScroller;

this.scroll = true;

this.SetOptions(options);

this.side = 1;//1是左 -1是右

switch (this.options.Side)

{

case "right" :

this.side = -1;

break;

case "left" :

default :

this.side = 1;

}

addEventHandler(oScrollMid , "mouseover", function()

{ oScroll.scroll = false; });

addEventHandler(oScrollMid , "mouseout", function()

{ oScroll.scroll = true; });

if(idScrollLeft)

{ addEventHandler($(idScrollLeft), "click", function()

{ oScroll.side = 1; }); }

if(idScrollRight)

{ addEventHandler($(idScrollRight), "click", function()

{ oScroll.side = -1; }); }

this.Scroll();

//设置默认属性

SetOptions: function(options)

{

this.options =

{//默认值

Step: 1,//每次变化的px量

Time: 50,//速度

Side: "left"//默认滚动方向

};

Object.extend(this.options, options ||

{});

//滚动

Scroll: function()

{

if (this.scroll)

{

var iScroll = this.oScroller.scrollLeft, iWidth = this.widthList;

if(this.side > 0)

{

if(iScroll >= (iWidth * 2 - this.widthScroller))

{ iScroll -= iWidth; }

} else

{

if(iScroll <= 0)

{ iScroll += iWidth; }

}

this.oScroller.scrollLeft = iScroll + this.options.Step * this.side;//注意scrollLeft超过1400会自动变回1400 注意长度

}

var oScroll = this; window.setTimeout(function()

{ oScroll.Scroll(); }, this.options.Time);

}

};

window.onload = function()

{

new Scroller("idScroller","idScrollMid", "idScrollLeft", "idScrollRight");

}

</script>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/cloudgamer/archive/2008/01/15/1040408.html