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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
Apr 02 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
May 12 Javascript
ES6中Iterator与for..of..遍历用法分析
Mar 31 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
Jul 24 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
Bootstrap实现前端登录页面带验证码功能完整示例
Mar 26 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 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 SPL标准库之接口(Interface)详解
2015/05/11 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
ThinkPHP模板标签eq if 中区分0,null,false的方法
2017/03/24 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JS获取鼠标坐标的实例方法
2013/07/18 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
JavaScript中的类与实例实现方法
2015/01/23 Javascript
js实现(全选)多选按钮的方法【附实例】
2016/03/30 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
Javascript中绑定click事件的四种方式介绍
2018/10/26 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
详解Python编程中包的概念与管理
2015/10/16 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
对python中的logger模块全面讲解
2018/04/28 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
Python OpenCV处理图像之图像像素点操作
2018/07/10 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
基于python tkinter的点名小程序功能的实例代码
2020/08/22 Python
Python爬虫UA伪装爬取的实例讲解
2021/02/19 Python
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
代领毕业证委托书
2014/08/02 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
如何使用pdb进行Python调试
2021/06/30 Python