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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
整理Javascript事件响应学习笔记
Dec 02 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
Aug 04 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
浅谈vue项目,访问路径#号的问题
Aug 14 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
第六节--访问属性和方法
2006/11/16 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP中大括号'{}'用法实例总结
2017/02/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
利用javascript查看html源文件
2006/11/08 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
原生js实现随机点名
2020/07/05 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
用python实现刷点击率的示例代码
2019/02/21 Python
python安装scipy的步骤解析
2019/09/28 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类?
2012/05/30 面试题
大四毕业生学习总结的自我评价
2013/10/31 职场文书
高中毕业生自我鉴定
2013/11/03 职场文书
《三峡》教学反思
2014/03/01 职场文书
上班离岗检讨书
2014/09/10 职场文书
土地转让协议书
2014/09/27 职场文书
小区的门卫岗位职责
2014/10/01 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS