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

最新推荐文章于 2022-11-05 16:33:29 发布

my_coding2015

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量4.2k

点赞数

分类专栏： Js+Html+css 文章标签： web前端开发

本文链接：https://blog.csdn.net/my_coding2015/article/details/52133364

版权

Js+Html+css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：

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.5
Author:Joel

1.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.明天继续...

my_coding2015

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
原生Js无缝滚动效果的简单实现

前言：1.仍然是比较简单的内容，从简单开始慢慢加深自己的js水平。2.无缝滚动，前提条件是子box的高度要大于父box的高度，这样才有必要去滚动，否则直接展示就可以了。3.增添了鼠标移入停止和移出继续滚动的效果。4.在小结部分会总结一些过程中遇到的疑问，还望各位不啬赐教，拜谢。代码如下：<!-- Time:2016.8.5Author:Joel1.html标
复制链接

扫一扫