jquery实现文字向左不间断滚动,可伸展哦

Javascript 3123 0 2012-08-29

jquery实现文字向左不间断滚动,可伸展哦

JS:

$(document).ready(function(){
    var MarTxtID='#notice';
    var wi=swidth=MB_Width=MS_width=0; var speed=30; var MarTag='Marquee'; var MarText=$(MarTxtID).html();
    MarText='<div id="'+MarTag+'_big" style="white-space:nowrap; overflow:hidden"><div id="'+MarTag+'_small" style="position:absolute">'+MarText+'</div></div>';
    $(MarTxtID).html(MarText); MB_Width=$('#'+MarTag+'_big').width(); MS_width=$('#'+MarTag+'_small').width(); $('#'+MarTag+'_small').css('position','relative');
    swidth=MS_width-MB_Width; var MyMar=setInterval(marquee,speed);
    $('#'+MarTag+'_big').mouseover(function(){clearInterval(MyMar);});
    $('#'+MarTag+'_big').mouseout(function(){MyMar=setInterval(marquee,speed);});
    function marquee(){if(wi>swidth){wi=0;} $('#'+MarTag+'_big').scrollLeft(wi); wi++;}
    $('#temp').html(MB_Width);
});

 

HTML:

<div id="notice"><a href="#">·农业部:全力以赴打赢病虫防控攻坚战</a> <a href="#">·中国主产粮区遭遇罕见农业病虫害</a> <a href="#">·国家农技推广机构履行公益性职责 无偿提供服务</a> <a href="#">·发挥后发优势 实现绿色崛起 ——访海南省委书记罗保铭</a> <a href="#">·"三农"发展—— 新农村建设迈大步</a> <a href="#">·十年统筹 十年跨越</a> <a href="#">·农产品期货 鸡蛋期货上市将丰富农产品避险体系 </a> <a href="#">·成本上涨"两节"临近 两因素推高市场蛋价</a> <a href="#">·鸡蛋价格上涨一点又何妨</a> <a href="#">·"三农"发展 ——现代农业风生水起</a> <a href="#">·新华社监测显示:8月以来全国羊肉价格涨势趋缓</a></div>

上一篇:JS中的setInterval和setTimeout区别

下一篇:Jquery UI dialog 详解 (中文)

讨论数量:2

天涯网魂 3 杠 5 星2012-09-03 12:19:07

补充:

如果是IE6不滚动,那就限制下宽度及相对路径,比如:
原来:style="white-space:nowrap; overflow:hidden"
改后:style="white-space:nowrap; overflow:hidden; width:885px; position:relative"

天涯网魂 3 杠 5 星2012-08-29 13:59:32

补充:这个比之前的好用多了,方便调用,只要在这里设置下您要滚动的ID就OK了!

比如:
您要滚动的ID为:notice,那么MarTxtID='#notice';
如果您要滚动的ID为aaa;那么MarTxtID='#aaa';
以此类推~~

如要交流请加QQ群:59103908

请先登录再发表讨论。 2024-05-03

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链