JavaScript 中滚动的无缝滚动和间歇无缝滚动实现

来源：互联网发布：文本相似度算法评分编辑：程序博客网时间：2024/09/21 08:16

在HTML中滚动可以使用<marquee></marquee> 标签进行实现，然后我们可以使用其参数进行设置滚动的方式和滚动的样式。

1. behavior 滚动的方式：

alternate : 表示在两端之间来回的滚动，
scroll ：表示由一端滚动到另外一端，会重复
slide：表示由一端滚动到另一端，不会重复

2. direction 滚动的方向是down，up，left，right
3.loop 滚动的次数（当loop =-1表示一直很滚下去，默认是-1）
4. scrollamount 设定活动字幕的滚动的速度
5. scrolldelay 设定活动字幕滚动两次之间的延迟时间

下面是一个简单的例子：

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><marquee>默认滚动方式（向左）</marquee><br /><marquee direction="right" scrolldelay="500">设置向右滚动，延迟时间为500 毫秒</marquee><marquee behavior="scroll" loop="-1" scrollamount="2">设置连续滚动速度为2</marquee><br /><br /><marquee direction="up" bgcolor="aquamarine" width="200px" height="100px">在某一个区域进行的滚动</marquee></body></html>

上面是HTML中滚动的设定，那么我们如何使用JS 进行滚动的设置，主要用到了定时器，scrollTop属性和scrollHeight属性，通过定时器和scrollTop可以使页面进行滚动，使用

scrollTop 和scrollHeight，进行无缝设置。下面是一个demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>向上无缝滚动</title><style>body {font-size: 12px;line-height: 24px;text-algin: center;        /* 页面内容居中 */}* {margin: 0px;padding: 0px;            /*  去掉所有标签的marign和padding的值  */}ul {list-style: none;           /*  去掉ul标签默认的点样式  */}a img {border: none;        /*  超链接下，图片的边框  */}a {color: #333;text-decoration: none;     /* 超链接样式 */}a:hover {color: #ff0000;}#mooc {width: 399px;border: 5px solid #ababab;-moz-border-radius: 15px;      /* Gecko browsers */-webkit-border-radius: 15px;   /* Webkit browsers */border-radius: 15px;box-shadow: 2px 2px 10px #ababab;margin: 50px auto 0;text-align: left;               /* 让新闻内容靠左 */}/*  头部样式 */#moocTitle {height: 62px;overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */font-size: 26px;line-height: 62px;padding-left: 30px;background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/border: 1px solid ##f05e6f;-moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */-webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */border-radius: 8px 8px 0 0;color: #fff;position: relative;}#moocTitle a {position: absolute;right: 10px;bottom: 10px;display: inline;color: #fff;font-size: 12px;line-height: 24px;}/*  底部样式 */#moocBot {width: 399px;height: 10px;overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */}/*  中间样式 */#moocBox {height: 144px;width: 335px;margin-left: 25px;margin-top: 10px;overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */}#mooc ul li {height: 24px;}#mooc ul li a {width: 180px;float: left;display: block;overflow: hidden;text-indent: 15px;height: 24px;}#mooc ul li span {float: right;color: #999;}</style></head><body><!--  慕课网课程公告开始 --><div  id="mooc"> <!--  头部 --><h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3><!--  头部结束 --> <!--  中间 --><div  id="moocBox">    <ul id="con1">        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>        <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>        <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>        <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>        <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>        <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>        <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>        <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>        <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>    </ul>    <ul id="con2">    </ul></div><!--  中间结束 --> </div><!--  慕课网课程公告结束 --> <script type="text/javascript"> var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50;//设置头部高度 area.scrollTop = 0; //将内容进行复制，无缝滚动的基础 con2.innerHTML = con1.innerHTML; function scrollUp(){ //如果第一个的高度大于或等于所以的高度，那么就将第一个高度进行归0 处理。否则的话就进行自增 //这样就可以进行无缝连接了 if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{   area.scrollTop ++;  } } //设置定时器，使用什么样的速度var myScroll = setInterval("scrollUp()",speed);//当鼠标移动到区域的时候区域的滑动停止area.onmouseover = function(){ clearInterval(myScroll);}//当鼠标移出区域的时候，区域的滑动继续area.onmouseout = function(){ myScroll = setInterval("scrollUp()",speed);} </script></body></html>

就上面的无缝滚动，可以使用setTimeOut() 进行时间的间隔，间歇滚动的样式是那种隔了几秒然后在进行滚动，下面是一个Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新闻无缝向上无缝滚动</title><!--作者：1807782219@qq.com时间：2017-08-27描述：间接性的滑动是每隔某秒的时候进行滑动一次。滑动时执行设定定时器：setInterval()间隔的时候需要：setTimeOut() 间隔多久--><style>body {font-size: 12px;line-height: 24px;text-algin: center;        /* 页面内容居中 */}* {margin: 0px;padding: 0px;            /*  去掉所有标签的marign和padding的值  */}ul {list-style: none;           /*  去掉ul标签默认的点样式  */}a img {border: none;        /*  超链接下，图片的边框  */}a {color: #333;text-decoration: none;     /* 超链接样式 */}a:hover {color: #ff0000;}#mooc {width: 399px;border: 5px solid #ababab;-moz-border-radius: 15px;      /* Gecko browsers */-webkit-border-radius: 15px;   /* Webkit browsers */border-radius: 15px;box-shadow: 2px 2px 10px #ababab;margin: 50px auto 0;text-align: left;               /* 让新闻内容靠左 */}/*  头部样式 */#moocTitle {height: 62px;overflow: hidden;  /* 这个一定要加上，内容超出的部分要隐藏，免得撑高头部 */font-size: 26px;line-height: 62px;padding-left: 30px;background-image: -moz-linear-gradient(top, #f05e6f, #c9394a); /* Firefox */background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f05e6f), color-stop(1, #c9394a)); /* Saf4+, Chrome */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8fa1ff', endColorstr='#f05e6f', GradientType='0'); /* IE*/border: 1px solid ##f05e6f;-moz-border-radius: 8px 8px 0 0;      /* Gecko browsers */-webkit-border-radius: 8px 8px 0 0;   /* Webkit browsers */border-radius: 8px 8px 0 0;color: #fff;position: relative;}#moocTitle a {position: absolute;right: 10px;bottom: 10px;display: inline;color: #fff;font-size: 12px;line-height: 24px;}/*  底部样式 */#moocBot {width: 399px;height: 10px;overflow: hidden;     /* 这个一定要加上，内容超出的部分要隐藏，免得撑高底部结构 */}/*  中间样式 */#moocBox {height: 24px;/*如果想一行显示那么就设置为文字的大小高度即可*/width: 335px;margin-left: 25px;margin-top: 10px;overflow: hidden;    /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */}#mooc ul li {height: 24px;}#mooc ul li a {width: 180px;float: left;display: block;overflow: hidden;text-indent: 15px;height: 24px;}#mooc ul li span {float: right;color: #999;}</style></head><body><!--  慕课网课程公告开始 --><div  id="mooc"> <!--  头部 --><div  id="moocTitle">慕课网最新课程<a href="#" target="_self">更多>></a> </div><!--  头部结束 --> <!--  中间 --><div  id="moocBox">    <ul>        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>        <li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>        <li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>        <li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>        <li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>        <li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>        <li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>        <li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>        <li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>    </ul></div><!--  中间结束 --> <!--  底部 --><div  id ="moocBot"> </div><!--  底部结束 --> </div><!--  慕课网课程公告结束 --> <script type="text/javascript"> var area = document.getElementById('moocBox'); var iliHeight = 24;//单行滚动的高度 var speed = 50;//滚动的速度 var time; var delay= 2000;//延迟的时间 area.scrollTop=0; area.innerHTML+=area.innerHTML;//克隆一份一样的内容，无缝滑动的基础 function startScroll(){ time=setInterval("scrollUp()",speed); area.scrollTop++; } function scrollUp(){ //这里设置的是每隔多少行然后进行停止设定的秒数 iliHeight 可以设定，因为上面css中文字大小为24px ，所以如果是相隔多少行那么iliHeight 就设置24的整数倍 if(area.scrollTop % iliHeight==0){ clearInterval(time); //延迟滚动 setTimeout(startScroll,delay); }else{  //如果 第一条上升的高度已经等于或等于所有的条目高度之和，那么就将第一条的高度置为0 这样的话就可以进行无缝连接 area.scrollTop++; if(area.scrollTop >= area.scrollHeight/2){ area.scrollTop =0; } } }  //启动的时候就开始延迟 setTimeout(startScroll,delay) </script></body></html>

上面的注释很清楚的介绍了如何使用，和修改

阅读全文

0 0