原生Js无缝滚动效果的简单实现

来源：互联网发布：js写出乘法表编辑：程序博客网时间：2024/04/29 01:42

前言：

1.仍然是比较简单的内容，从简单开始慢慢加深自己的js水平。

2.无缝滚动，前提条件是子box的高度要大于父box的高度，这样才有必要去滚动，否则直接展示就可以了。

3.增添了鼠标移入停止和移出继续滚动的效果。

4.增加了间歇性无缝滚动效果。

5.在小结部分会总结一些过程中遇到的疑问，还望各位不啬赐教，拜谢。

代码如下：

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="html"><!-- Time:2016.8.5Author:Joel1.html标签<marquee>，可以考察一下在html5标准下使用什么来实现可以设置滚动区域的宽高behavior ＝ “alternate”  两端之间来回滚动behavior ＝ “scroll”  由一端到另一端，重复滚动behavior ＝ “slide”  由一端到另一端，不重复direction  滚动的方向（down，up，left，right）loop  （滚动的次数，loop ＝ －1 表示无限滚动，默认为－1）scrollamount  设置活动字幕的滚动速度scrolldelay  设置活动字幕两次滚动之间的延迟时间2.onmouseover = "this.stop()"3.onmouseout = "this.start()"4.父元素设置高度 滚动元素也需要设置高度 而且滚动元素的高度必须大于父元素 这样才能滚动5.setTimeout(表达式，延迟时间) 仅执行1次--><!doctype html><html lang="en"><head><meta charset="UTF-8"><title>InfoRoll</title><style>.box{width:300px;border: 1px solid #8f8f8f;}dl dt{text-align: center;margin-bottom: 20px;}.box1{height:150px;width:200px;border:1px solid #8f8f8f;margin: 0 auto;overflow: hidden;}ul{            height: 200px; }ul li{height: 24px;}p{text-align: center;}</style><script type="text/javascript">window.onload = function(){//无缝滚动效果// var box1 = document.getElementsByClassName("box1");// var com1 = document.getElementsByClassName("com1");// var com2 = document.getElementsByClassName("com2");// com2[0].innerHTML = com1[0].innerHTML;// var myscr = function(){  //       if(box1[0].scrollTop >= com1[0].offsetHeight){// box1[0].scrollTop = 0;// }// else{// box1[0].scrollTop++;// }          //       }  //       //这里出现了很诡异的问题。如果使用function myscr(){}，传入"myscr()"会一直报错，不知道是什么问题。  //       var timer = setInterval(myscr,50);  //       box1[0].onmouseover = function(){  //       clearInterval(timer);  //       }  //       box1[0].onmouseout = function(){    //           timer = setInterval(myscr,50);   //       }     //间歇性滚动效果var box1 = document.getElementsByClassName("box1");box1[0].scrollTop = 0;var liHeight = 24;var timer;function startMove(){   box1[0].scrollTop++;    timer = setInterval(myscr,50);}    function myscr(){       if(box1[0].scrollTop % liHeight == 0){         clearInterval(timer);         setTimeout(startMove,2000);         }       else{       box1[0].scrollTop++;       if(box1[0].scrollTop >= box1[0].scrollHeight / 2){       box1[0].scrollTop = 0;       }       }    }    setTimeout(startMove,2000);}</script></head><body><!--几种滚动实例--><!-- <section class = "box">  <dl>  <dt>默认滚动</dt>  <dd><marquee>默认滚动</marquee></dd>  </dl>  <dl>  <dt>文字滚动(向右)</dt>  <dd><marquee direction="right">向右走...</marquee></dd>  </dl>  <dl>  <dt>文字滚动(来回滚动)</dt>  <dd><marquee behavior = "alternate" loop = "－1" scrollamount = "20">来回滚动...</marquee></dd>  </dl>  <dl>  <dt>向上滚....</dt>  <dd><marquee direction="up" width = "300px" height = "100px">向上走起...</marquee></dd>  </dl></section> --><!--实现无缝滚动效果--><div class = "box1"><ul class = "com1">          <li>1</li>          <li>2</li>          <li>3</li>          <li>4</li>          <li>5</li>          <li>6</li>          <li>7</li>          <li>8</li>          <li>9</li></ul><ul class = "com2"></ul> </div></body></html>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span>

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">小结：</span>

1.在实现过程中，使用了var myscr = funciton(){}的匿名函数结构。开始的时候是使用的function myscr(){}。但是实际运用时发现，传入setInterval中的“myscr()”总是没有找到。ie和chrome浏览器下的后台都是同样的输出，每隔50ms输出一次myscr这个函数没有定义。不知道这个问题是怎么产生的，非常困惑。想了一两个小时，还是没有结果。

2.marquee标签好像过时了，但是暂时还没有学习新的替代标签。效果上来看，还是蛮不错的。

3.明天继续...

0 0