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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
Javascript中的this绑定介绍
Sep 22 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
基于Jquery和html5的7款个性化地图插件
Nov 17 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
JS实现的几个常用算法
Nov 12 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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求一个网段开始与结束IP地址的方法
2015/07/09 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
使用js完成节点的增删改复制等的操作
2014/01/02 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
2017/08/14 jQuery
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
python列表去重的二种方法
2014/02/14 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
取numpy数组的某几行某几列方法
2018/04/03 Python
对python字典过滤条件的实例详解
2019/01/22 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
pycharm设置python文件模板信息过程图解
2020/03/10 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
销售所有的狗狗产品:Dog.com
2016/10/13 全球购物
农民致富事迹材料
2014/01/23 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2015年社区工作总结
2015/04/08 职场文书
Redis中key的过期删除策略和内存淘汰机制
2022/04/12 Redis
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android