js文字横向滚动特效

 更新时间:2015年11月11日 10:52:42   投稿:lijiao  
这篇文章主要介绍了js文字横向滚动特效,实现过程很简单,文字在某块区域内横向无间隙滚动,感兴趣的小伙伴们可以参考一下

本文为大家分享了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数据结构之双向链表和双向循环链表的实现

    本篇文章主要介绍了JavaScript数据结构之双向链表和双向循环链表的实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • javascript实现英文首字母大写

    javascript实现英文首字母大写

    本文给大家总结了几种可以实现英文首字母大写的javascript脚本,另附上一个CSS的实现方法,非常的简单实用,这里推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

    layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

    今天小编就为大家分享一篇layui动态渲染生成左侧3级菜单的方法(根据后台返回数据),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 详解Javascript百度地图接口开发文档中的类和方法

    详解Javascript百度地图接口开发文档中的类和方法

    最近在工作中在用laravel框架仿写饿了么外卖商城,于是学习了一下有关地图接口相关的知识,以下是百步地图接口开发文档的一些类和方法的使用,需要的朋友们可以参考借鉴,下面来一起看看吧。
    2017-02-02
  • TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结)

    这篇文章主要介绍了TypeScript Pinia实战分享(Vuex和Pinia对比梳理总结),今天我们再来实战下官方推荐的新的vue状态管理工具Pini,感兴趣的小伙伴可以参考一下
    2022-06-06
  • ES6的一些实用高级技巧总结

    ES6的一些实用高级技巧总结

    ES6不仅在语法上有很大的改进,在代码的组织结构上也有重大升级,下面这篇文章主要给大家介绍了关于ES6的一些实用高级技巧的相关资料,需要的朋友可以参考下
    2023-12-12
  • javascript 极速 隐藏/显示万行表格列只需 60毫秒

    javascript 极速 隐藏/显示万行表格列只需 60毫秒

    隐藏表格列 这种方式的效率极低。例如,隐藏一个千行表格的某列,在我的笔记本(P4 M 1.4G,768M内存)上执行需要约 4000毫秒的时间,令人无法忍受。
    2009-03-03
  • 一个js过滤空格的小函数

    一个js过滤空格的小函数

    过滤空格,尤其是在一些注册页面比较实用,可以用js在客户端将空格过滤掉,减轻服务器端的负担,下面是实现函数
    2014-10-10
  • 简单了解JavaScript arguement原理及作用

    简单了解JavaScript arguement原理及作用

    这篇文章主要介绍了简单了解JavaScript arguement原理及作用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • javascript局部自定义鼠标右键菜单

    javascript局部自定义鼠标右键菜单

    这篇文章主要为大家详细介绍了javascript局部自定义鼠标右键菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12

最新评论