栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js文字横向滚动特效

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js文字横向滚动特效

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

页面布局 

 
  
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   恭喜793765***获得 50元巨人点卡奖励
   
  
  

样式:

.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文字横向滚动特效。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/100028.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号