您的位置：首页 > Web前端 > JavaScript

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

2016-08-05 23:12 881 查看

前言：

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端开发

相关文章推荐

新的分享

章节导航