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 参考教程
Dec 29 Javascript
js表格分页实现代码
Sep 18 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
基于javascript显示当前时间以及倒计时功能
Mar 18 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
小程序实现左滑删除功能
Oct 30 Javascript
design vue 表格开启列排序的操作
Oct 28 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
PHP的历史和优缺点
2006/10/09 PHP
风格模板初级不完全修改教程
2006/10/09 PHP
PHP中strtotime函数使用方法详解
2011/11/27 PHP
php pdo连接数据库操作示例
2019/11/18 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
jquery操作select大全
2014/04/25 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
谈谈JavaScript类型系统之Math
2016/01/06 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:51]DOTA2 2015国际邀请赛中国区预选赛第一日战报
2015/05/27 DOTA
python并发2之使用asyncio处理并发
2017/12/21 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
Python简单实现阿拉伯数字和罗马数字的互相转换功能示例
2018/04/17 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
工作失职检讨书范文
2014/01/16 职场文书
酒店员工检讨书
2014/02/18 职场文书
2014年教研活动总结范文
2014/04/26 职场文书
作风年建设汇报材料
2014/08/14 职场文书
运动会宣传稿50字
2015/07/23 职场文书
施工安全协议书
2016/03/22 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
MongoDB数据库之添删改查
2022/04/26 MongoDB