js实现文字滚动效果


Posted in Javascript onMarch 03, 2016

本文实例为大家分享了js实现文字滚动的具体代码,供大家参考,具体内容如下

首先先看一下大致效果图,因为是动态的,在页面无法显示出来。

js实现文字滚动效果

具体的实现代码如下:

1.首先是css代码:

<style type="text/css">
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;}
ul,li{list-style:none;}
a{ text-decoration:none; color:#333;}
 #demo{
  overflow:hidden; /*溢出的部分不显示*/
  width:290px;
  height:228px;/*一定要确切,避免demo1与demo2之间的距离过大*/
  padding:5px;
  margin:50px auto;
  }
#express li{
   list-style:none;
   font-size:14px;
   height:25px;
   margin:0px 5px;
   line-height:180%;/*行与行之间的距离*/
   letter-spacing:2px;/*字与字之间的距离*/
   border-bottom:1px dashed #ccc;
   cursor:pointer;
   }
</style>

2.内容代码如下:

<div id="demo" >
 <div id="demo1" >
  <ul id="express">
   <li><a href="#">召开背街小巷综合整治工作调度会</a></li>
   <li><a href="#">平原街道加大出店经营整治</a></li>
   <li><a href="#">平原街道召开计生业务培训会</a></li>


 <li><a href="#">平原街道:干部进村入户宣传促征迁</a></li>



 <li><a href="#">平原街道:为返乡群众免费孕检</a></li>
   <li><a href="#">平原街道:狠抓春运道路交通安全</a></li>   
  </ul>
 </div>
 <div id="demo2"></div>
</div>

3.最后是最关键的js代码:

<script type="text/javascript">
 //获取id=demo,id=demo1,id=demo2的元素对象,并把id=demo1的内容赋值给id=demo2
 var demo=document.getElementById("demo");
 var demo1=document.getElementById("demo1");
 var demo2=document.getElementById("demo2");
 demo2.innerHTML=demo1.innerHTML;
 //给demo1,demo2加相同的高度
 demo1.style.height=demo.offsetHeight+"px";
 demo2.style.height=demo.offsetHeight+"px";
 //定时器,每隔50毫秒调用一次scrollup()函数,来实现文字的滚动
 var timer=window.setInterval("scrollup()",50);
 //定义函数
 function scrollup()
 {
  //如果demo滚上去的高度大于demo的高度,重新给demo赋值从0再开始滑动
  if(demo.scrollTop>=demo.offsetHeight)
  {
   demo.scrollTop=0;
  }else
  {
   demo.scrollTop++;
  }
 }
 //鼠标放上停止滚动,鼠标离开继续滚动
  demo.onmouseover=function(){
         //清除定时器
         clearInterval(timer);
         }
  demo.onmouseout=function(){
         //添加定时器
         timer=window.setInterval("scrollup()",50);
         }

</script>

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
给jqGrid数据行添加修改和删除操作链接(之一)
Nov 04 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
javascript的事件触发器介绍的实现
Jun 05 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
简单分析javascript中的函数
Sep 10 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
JS实现十分钟倒计时代码实例
Oct 18 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
vue项目创建并引入饿了么elementUI组件的步骤
Apr 11 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 #Javascript
JQuery日期插件datepicker的使用方法
Mar 03 #Javascript
jQuery日历插件datepicker用法详解
Mar 03 #Javascript
初步使用Node连接Mysql数据库
Mar 03 #Javascript
初步使用bootstrap快速创建页面
Mar 03 #Javascript
JS动态增删表格行的方法
Mar 03 #Javascript
微信jssdk在iframe页面失效问题的解决措施
Mar 03 #Javascript
You might like
在普通HTTP上安全地传输密码
2007/07/21 PHP
PHP面向对象法则
2012/02/23 PHP
apache和php之间协同工作的配置经验分享
2013/04/08 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
javascript:以前写的xmlhttp池,代码
2008/05/18 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
2011/10/13 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
2012/05/23 Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
2013/07/05 Javascript
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
jQuery实现复选框批量选择与反选的方法
2015/06/17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
javascript中json对象json数组json字符串互转及取值方法
2017/04/19 Javascript
基于LayUI分页和LayUI laypage分页的使用示例
2017/08/02 Javascript
在React项目中使用Eslint代码检查工具及常见问题
2018/10/10 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
2019/04/04 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
[01:21]DOTA2新纪元-7.0新版本即将开启!
2016/12/11 DOTA
python创建和使用字典实例详解
2013/11/01 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python 3.8正式发布,来尝鲜这些新特性吧
2019/10/15 Python
python中property和setter装饰器用法
2019/12/19 Python
CSS3属性box-sizing使用指南
2014/12/09 HTML / CSS
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
软件测试常见笔试题
2012/02/04 面试题
yy结婚证婚词
2014/01/10 职场文书
尊师重教演讲稿
2014/09/04 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers