js文字横向滚动特效


Posted in Javascript onNovember 11, 2015

本文为大家分享了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文字横向滚动特效。

Javascript 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
js实现短信发送倒计时功能(正则验证)
Feb 10 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
JS查找孩子节点简单示例
Jul 25 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
Js视频播放器插件Video.js使用方法详解
Feb 04 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 Javascript
详解javascript遍历方式
Nov 11 #Javascript
js window对象属性和方法相关资料整理
Nov 11 #Javascript
js clearInterval()方法的定义和用法
Nov 11 #Javascript
jquery原理以及学习技巧介绍
Nov 11 #Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
Nov 11 #Javascript
轻松实现javascript数据双向绑定
Nov 11 #Javascript
谈谈对offsetleft兼容性的理解
Nov 11 #Javascript
You might like
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
PHP中函数内引用全局变量的方法
2008/10/20 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
Yii2.0框架实现带分页的多条件搜索功能示例
2019/02/20 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
使javascript也能包含文件
2006/10/26 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
2011/11/14 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
javascript实现密码验证
2015/11/10 Javascript
原生JavaScript制作微博发布面板效果
2016/03/11 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
React 组件间的通信示例
2018/06/14 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
从零学Python之入门(五)缩进和选择
2014/05/27 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
基于Python中的yield表达式介绍
2019/11/19 Python
Python with语句用法原理详解
2020/07/03 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
创业计划书撰写原则
2014/01/25 职场文书
学雷锋宣传标语
2014/06/25 职场文书
委托书怎样写
2014/08/30 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
学校教师培训工作总结
2015/10/14 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
这样写python注释让代码更加的优雅
2021/06/02 Python
linux中nohup和后台运行进程查看及终止
2021/06/24 Python
vue打包时去掉所有的console.log
2022/04/10 Vue.js