无间歇文字滚动

原创 2018年04月17日 14:29:34
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>无间歇滚动</title>
<style>
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
}
a:link,a:active,a:visited{
color: #000;
}
#moocbox{
width: 600px;
height: 22px;
border: 1px solid #ccc;
margin:60px auto;
overflow: hidden;
}
.con{
padding-left: 24px;
}
.con li{
list-style: decimal;
}
.con li a{
font-size: 14px;
}
.con li a:hover{
color: red;
}
</style>
</head>
<body>
<div id="moocbox">
<ul id="con1" class="con">
<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>
<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>
<ul id="con2" class="con"></ul>
</div>
<script>
//获取外框
var area = document.getElementById("moocbox");
//获取con1
var con1 = document.getElementById("con1");
//获取con2
var con2=document.getElementById("con2");
//con2克隆con1
con2.innerHTML=con1.innerHTML;
//设置滚动的初始值为0
area.scrollTop=0;
//创建向上滚动的函数
function scrollUp(){
area.scrollTop++;
//判断
if(area.scrollTop >= con1.offsetHeight){
area.scrollTop = 0;
}else{
area.scrollTop++;
}
}
//将滑动的速度保存为一个变量
var speed = 200;
//使用定时器,速度为50
var myScroll = setInterval("scrollUp()",speed);
//鼠标移入清除定时器
area.onmouseover = function(){
clearInterval(myScroll);
}
//鼠标移出,添加定时器
area.onmouseout = function(){
myScroll = setInterval("scrollUp()",speed);
}
</script>

</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yingleiming/article/details/79974410

js文字滚动插件制作双行关联向上文字间隙滚动

  • 2012年09月26日 13:49
  • 3KB
  • 下载

原生js高仿新浪微博大厅评论列表文字淡出淡进向下滚动效果

  • 2014年03月31日 14:34
  • 4KB
  • 下载

html5 css3实现字幕滚动的效果

html5中marquee逐渐被取代,要实现字幕的滚动可以再js中实现: html5 body { margin: 0px; font-size: 12px; ...
  • u012426959
  • u012426959
  • 2017-11-29 15:28:17
  • 2555

js文字滚动插件

  • 2012年09月26日 13:45
  • 3KB
  • 下载

文字,图片 无间隔滚动 有三种方式

  • 2009年11月16日 14:56
  • 2KB
  • 下载

文字不间断无缝隙滚动

  • 2015年11月25日 14:29
  • 1KB
  • 下载

内存不良引起开机风扇间歇停转

微星g41主板,金士顿ddr3内存,使用年限1年,开机出现cpu风扇间歇性停止,不开机,无报警声.          断电,断开硬盘连接线(试机时建议断开硬盘连接线),拔出cmos电池后重新开机,故...
  • jsship
  • jsship
  • 2012-06-09 18:25:02
  • 3987

小玩Android布局中的weight(权重)

【声明】转载请注明出处,此文出自指尖飞落的博客:http://blog.csdn.net/huntersnail ——尊重作者,知识无价,交流无限! weight是线性布局的特有属性,控件的宽...
  • huntersnail
  • huntersnail
  • 2015-07-13 15:59:50
  • 982

文字无缝循环滚动js代码(放到body中直接可以使用)

  • 2014年01月23日 18:38
  • 15KB
  • 下载

文字滚动无间隙代码

csdn 博客 招聘滚动信息广告特效
  • bornjasoncen
  • bornjasoncen
  • 2010-08-07 22:26:00
  • 778
收藏助手
不良信息举报
您举报文章:无间歇文字滚动
举报原因:
原因补充:

(最多只允许输入30个字)