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

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2012-05-18 12:21:13
  • 点击:3939
[0分]

相信不少网友们从前也使用过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 = $(’
’); 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); }
收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华