不用Margin使用jQuery实现左右滚动效果

相信不少网友们从前也使用过HTML中的Marquee来实现左右滚动的效果，但后来随着WEB标准的规范法，逐步用JS来替代这个传统的做法了。最近工作的需要，在网上参考了一下各路高手的做法，其中用得最多的应该是利用CSS中的position:absolute方法来实现。而本人就在前人的基础上改进优化了一下，使用jQuery+CSS中的margin-left方法，并将定义成果封装好直接调用即可。

打开演示地址

最后把核心源码写出来给大家参考参考——

var ScrollTime;

function ScrollAutoPlay(contID,scrolldir,showwidth,textwidth,steper){

var PosInit,currPos;

with($('#'+contID)){

currPos = parseInt(css('margin-left'));

if(scrolldir=='left'){

if(currPos<0 && Math.abs(currPos)>textwidth){

css('margin-left',showwidth);

}

else{

css('margin-left',currPos-steper);

}

}

else{

if(currPos>showwidth){

css('margin-left',(0-textwidth));

}

else{

css('margin-left',currPos-steper);

}

}

}

}

//--------------------------------------------左右滚动效果----------------------------------------------

//------------------------------------------------------------------------------------------------------

/*

AppendToObj： 显示位置（目标对象）

ShowHeight： 显示高度

ShowWidth： 显示宽度

ShowText： 显示信息

ScrollDirection： 滚动方向（值：left、right）

Steper： 每次移动的间距（单位：px；数值越小，滚动越流畅，建议设置为1px）

Interval: 每次执行运动的时间间隔（单位：毫秒；数值越小，运动越快）

*/

function ScrollText(AppendToObj,ShowHeight,ShowWidth,ShowText,ScrollDirection,Steper,Interval){

var TextWidth,PosInit,PosSteper;

with(AppendToObj){

html('');

css('overflow','hidden');

css('height',ShowHeight+'px');

css('line-height',ShowHeight+'px');

css('width',ShowWidth);

}

if (ScrollDirection=='left'){

PosInit = ShowWidth;

PosSteper = Steper;

}

else{

PosSteper = 0 - Steper;

}

if(Steper<1 || Steper>ShowWidth){Steper = 1}//每次移动间距超出限制(单位:px)

if(Interval<1){Interval = 10}//每次移动的时间间隔（单位：毫秒）

var Container = $('<div></div>');

var ContainerID = 'ContainerTemp';

var i = 0;

while($('#'+ContainerID).length>0){

ContainerID = ContainerID + '_' + i;

i++;

}

with(Container){

attr('id',ContainerID);

css('float','left');

css('cursor','default');

appendTo(AppendToObj);

html(ShowText);

TextWidth = width();

if(isNaN(PosInit)){PosInit = 0 - TextWidth;}

css('margin-left',PosInit);

mouseover(function(){

clearInterval(ScrollTime);

});

mouseout(function(){

ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);

});

}

ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);

}