首页 > 编程 > JavaScript > 正文

js文字横向滚动特效

2019-11-20 11:17:54
字体:
来源:转载
供稿:网友

本文为大家分享了js文字横向滚动特效代码,具体实现内容如下:

页面布局 

<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> 

样式:

.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;}

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);          }  }ScrollImgLeft();

以上就是轻松实现js文字横向滚动特效,大家可以在自己的网页中添加js文字横向滚动特效。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表