无缝滚动

最新推荐文章于 2024-11-12 11:19:19 发布

djrk76507

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量80

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qibingshen/p/5277341.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.roll{position: relative;}
.wrap ul{position: absolute; left: 0px; top: 0px; }
.wrap ul li{}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oDiv=document.getElementById('roll');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';
/*
//一直向右滚动
setInterval(function(){
oUl.style.left=oUl.offsetLeft+5+'px';

if(oUl.offsetLeft>oUl.offsetWidth/2){
oUl.style.left='0px';
}
},30);

//一直向左滚动
setInterval(function(){
oUl.style.left=oUl.offsetLeft-5+'px';

if(oUl.offsetLeft<-oUl.offsetWidth/2){
oUl.style.left='0px';
}
},30);
*/

//上下无缝滚动

setInterval(function(){
oUl.style.top=oUl.offsetTop+5+'px';

if(oUl.offsetTop <= - oUl.offsetHeight / 2){
oUl.style.top = '0';
}else if(oUl.offsetTop >= 0){
oUl.style.top = - oUl.offsetHeight / 2 + 'px';
};

},300);
//主要利用offsetLeft或offsetTop求得左边或上下的距离然后复制一份原来的走到一半的时候拉过来进而在视觉上产生滚动的效果

}
</script>
</head>
<body>
<div class="roll" id="roll">
<a href="javascript:void(0);" class="btn_left"></a>
<a href="javascript:void(0);" class="btn_right"></a>