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

具体的实现代码如下:

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>

利用js来实现文字的滚动(也就是我们常常见到的新闻版块中的公示公告)的更多相关文章

  1. js实现文字横向滚动

    页面布局      <div id="scroll_div" class="fl">         <div id="scroll ...

  2. Python反爬:利用js逆向和woff文件爬取猫眼电影评分信息

    首先:看看运行结果效果如何! 1. 实现思路 小编基本实现思路如下: 利用js逆向模拟请求得到电影评分的页面(就是猫眼电影的评分信息并不是我们上述看到的那个页面上,应该它的实现是在一个页面上插入另外一 ...

  3. js 实现文字列表滚动效果

    今天要实现抽奖名单在首页滚动展示的效果,就用js写了一个,代码如下: html代码: <style type="text/css"> *{margin:;padding ...

  4. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  5. js实现文字上下滚动效果

    大家都知道,做html页面时,为了提升网页的用户体验,我们需要在网页中加入一些特效,比如单行区域文字上下滚动就是经常用到的特效.如下图示效果: <html> <head> &l ...

  6. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  7. js判断用户是否正在滚动滚动条,滚动条滚动是否停止

    js智能判断是否可以自动滚动 比如,做一个音乐播放器,边播放,边定位歌词,播放的时候,需要自动定位到播放语句,但是用户去拖动或者滚动div(歌词面板)时,这时就必须停止自动滚动,或者说是不能自动滚动, ...

  8. marquee实现文字移动效果;js+div实现文字无缝移动效果

    1.marquee实现文字移动: <marquee width="220px;" scrollamount="5" onmouseover="t ...

  9. jQuery实现公告文字左右滚动

    jQuery实现公告文字左右滚动的代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &qu ...

随机推荐

  1. Navicat Premium连接Oracle 问题汇总

  2. mysql5.6 忘记root密码

    1.首先net stop mysql服务,并且切换到任务管理器,有与mysql有关的,最好关闭进程. 2.运行CMD命令切换到MySql安装bin目录,下面是我的mysql安装目录 cd  D:\Pr ...

  3. Learn ES2015

    折腾了大半年的项目,用的angular折腾快疯了. 总算有个小结了.正好闲下来为新的项目做准备,学点新的玩意玩玩,以往ES6都没用过,感觉被大部队甩好远了,抓紧跟上大部队的脚步... 1.利用let和 ...

  4. MongoDB的分片(9)

    什么是分片 分片是指将数据库拆分,将其分散在不同的机器上的过程.将数据分散到不同的机器上,不需要功能强大的服务器就可以存储更多的数据和处理更大的负载.基本思想就是将集合切成小块,这些块分散到若干片里, ...

  5. 结合谷歌地图多边形(polygon)与Sql Server 2008的空间数据类型计算某个点是否在多边形内的注意事项

    首先在利用 GEOGRAPHY::STPolyFromText(@GeoStr, 4326) 这样的函数把字符串转换为Geography类型时,字符串里经纬度的顺序是 “经度[空格]纬度”,即“lon ...

  6. Hibernate jpa 在实体类中对于时间的注解

    在时间类型DATE 属性上添加一个 @Temporal(TemporalType.DATE)(精确到年月日)@Temporal(TemporalType.TIME)(精确到时分秒)@Temporal( ...

  7. 从外部浏览开启app

    先描述一下需求:从浏览器中点击某个按钮,如果手机上装有相应的app,则直接开启app,并且到相对的页面.如果没有装该app,则会到相应的下载app的界面. 我这里主要用的是第三方的东西,就是魔窗中的m ...

  8. Puppet自动化运维-资源介绍篇(4)

    1.什么是资源? 资源是Puppet最基础的元素,每个资源的定义都具有标题,类型,以及一系列的属性. 资源定义有如下的特性:   (1) Puppet使用title在编译时区分每个资源,使用命名变量在 ...

  9. Angular内置指令(一)

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  10. node.js之开发环境搭建

    一.安装linux系统 (已安装linux可跳此步骤) 虚拟机推荐选择:VirtualBox 或者 Vmware (专业版永久激活码:5A02H-AU243-TZJ49-GTC7K-3C61N) 我这 ...