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 相关文章推荐
JavaScript 利用StringBuffer类提升+=拼接字符串效率
Nov 24 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
解决IE6的PNG透明JS插件使用介绍
Apr 17 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
Vue.js项目模板搭建图文教程
Sep 20 Javascript
微信小程序使用modal组件弹出对话框功能示例
Nov 29 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
Element-ui tree组件自定义节点使用方法代码详解
Sep 17 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
Nov 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
PHP分页显示制作详细讲解
2006/10/09 PHP
PHP判断搜索引擎蜘蛛并自动记忆到文件的代码
2012/02/04 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php的闭包(Closure)匿名函数详解
2015/02/22 PHP
PHP利用hash冲突漏洞进行DDoS攻击的方法分析
2015/03/26 PHP
php上传图片生成缩略图(GD库)
2016/01/06 PHP
php图像验证码生成代码
2017/06/08 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
11个用于提高排版水平的基于jquery的文字效果插件
2012/09/14 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
tween.js缓动补间动画算法示例
2018/02/13 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
JS 使用 window对象的print方法实现分页打印功能
2018/05/16 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
vue video和vue-video-player实现视频铺满教程
2020/10/30 Javascript
[03:40]DOTA2英雄梦之声_第01期_炼金术士
2014/06/23 DOTA
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现下载指定网址所有图片的方法
2015/08/08 Python
浅析python的Lambda表达式
2019/02/27 Python
树莓派4B安装Tensorflow的方法步骤
2020/07/16 Python
2020版Python学习路线图(附学习资料)
2020/09/15 Python
班组长岗位职责范本
2014/01/05 职场文书
幼儿园元旦亲子活动方案
2014/02/17 职场文书
预备党员群众路线思想汇报2014
2014/10/25 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书