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

《JavaScript学习笔记十》：无缝滚动的实现

2016-05-30 20:22 429 查看

《JavaScript学习笔记十》：无缝滚动的实现

无缝滚动在很多网页上面都有这样一个功能，用于动态的显示一些图片信息。

本篇博文就是模拟这样一个功能的实现，所设计的知识点为:根据offsetLeft动态的获取位置更改控件的left的值来使得控件移动。

先看如下的简单的例子，一个Div控件不断向右移动

<!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=gb2312" />
<title>无标题文档</title>
<style>
#div1 {width:200px;height:100px;position:absolute;background:red;left:70px;top:30px;margin:100px}
</style>

<script>
window.onload=function()
{
setInterval(function()
{
var oDiv = document.getElementById('div1');
oDiv.style.left=oDiv.offsetLeft+10+'px';
},1000);
};
</script>
</head>

<body>
<div id="div1">
</div>
</body>
</html>

有了上面的基础，就来看看无缝滚动的具体实现的代码

<!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=gb2312" />
<title>无标题文档</title>
<style>
* {margin:0; padding:0;}
#div1 {width:712px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;}
#div1 ul {position:absolute; left:0; top:0;}
#div1 ul li {float:left; width:178px; height:108px; list-style:none;}
</style>
<script>
window.onload=function()
{
var oDiv = document.getElementById('div1');
var oUl = oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');

oUl.innerHTML+=oUl.innerHTML;  //用两倍来进行移动
oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';//不能用：oLi[0].style.width
var timer;
var dis=2;
function  move()
{
//alert(oUl.offsetLeft);
//alert(oUl.offsetWidth);
if(oUl.offsetLeft<-oUl.offsetWidth/2)//即当向左滚动出去一半的时候，就立即将ul放在起点位置
{
oUl.style.left='0px';
}
if(oUl.offsetLeft>0)//即当向右滚动出去一半的时候，就立即将ul放在起点位置
{
oUl.style.left=-oUl.offsetWidth/2+'px';
}
oUl.style.left=oUl.offsetLeft+dis+'px';//由于ul为绝对定位，可以由width/height等来决定

}
timer=setInterval(move,100);

//当我们鼠标移动到div上面时，就应该停止
oDiv.onmouseover=function()
{
clearInterval(timer);
};
oDiv.onmouseout=function()
{
timer=setInterval(move,100);
};

var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
btn1.onclick=function()
{
dis=-2;
};
btn2.onclick=function()
{
dis=2;
};

};
</script>
</head>

<body>
<input id="btn1" type="button" value="向左滚动" />
<input id="btn2" type="button" value="向右滚动" />
<div id="div1">
<ul><!--每个图片大小为：178*108px -->
<li><img src="img2/1.jpg" /></li>
<li><img src="img2/2.jpg" /></li>
<li><img src="img2/3.jpg" /></li>
<li><img src="img2/4.jpg" /></li>
</ul>

</div>
</body>
</html>

从上面的代码可以看出，稍微有点复杂，需要我们仔细的分析，由于代码注释写的比较清楚，这里就不再解释，如果一遍没有看懂，可以多看几遍。

以上就是关于JavaScript的无缝滚动的实现。

参考资料

1、blue老师的《js视频教程》

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

标签：

相关文章推荐

新的分享

章节导航