Blogger Information
Blog 9
fans 0
comment 2
visits 7179
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
20行代码原生js实现文字横向轮播
Fergus的博客
Original
1260 people have browsed it

20行代码实现文字横向轮播效果

1 页面布局代码

<div id="scroll_div" class="fl">
   <div id="scroll_begin">
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
       恭喜793765***获得 <span class="pad_right">50元超市充值卡卡奖励</span>
   </div>
   <div id="scroll_end"></div>
</div>

2 css布局

.pad_right{ padding-right:2em;}
#scroll_div {height:26px;overflow: hidden;white-space: nowrap;width:535px;margin-left:10px;}
#scroll_begin,#scroll_end {display: inline;}


3 直接上js代码

function ScrollImgLeft(){
   var speed=50;
   var MyMar = null;
   var scroll_begin = document.getElementById("scroll_begin");
   var scroll_end = document.getElementById("scroll_end");
   var scroll_div = document.getElementById("scroll_div");
   scroll_end.innerHTML=scroll_begin.innerHTML;
   function Marquee(){
       if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
           scroll_div.scrollLeft-=scroll_begin.offsetWidth;
       else
           scroll_div.scrollLeft++;
   }
   MyMar=setInterval(Marquee,speed);
   scroll_div.onmouseover = function(){
       clearInterval(MyMar);
   }
   scroll_div.onmouseout = function(){
       MyMar = setInterval(Marquee,speed);
   }
}


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post