HTML无缝滚动效果-优快云博客

向左无缝滚动

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>向左无缝滚动</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
	margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  position:relative; width:520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
  position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
  width:120px; height:120px; background:green; float:left;display:inline; cursor:pointer;
  font-size:40px; color:#fff; text-align:center; line-height:120px; margin:0 5px;
}
</style>
</head>
<body>
<div id='box'>
	<ul class='clearfix'>
        <li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
<script type="text/javascript">
window.onload = function(){
  var oBox = $('box');
  var oUl = oBox.getElementsByTagName('ul')[0];
  var oLi = oUl.getElementsByTagName('li');
  var timer = null;
  var speed = 2;
  oUl.innerHTML += oUl.innerHTML;
  var oW = parseInt(getStyle(oLi[0],'width'))+10;
  oUl.style.width = oW*oLi.length+'px';
  toPlay();
  timer = setInterval(toPlay,30);
  oUl.onmousemove = Move;
  oUl.onmouseout = Out;
  function toPlay(){
    if(oUl.offsetLeft<-oUl.offsetWidth/2){
		oUl.style.left='0px';
	}
	oUl.style.left = oUl.offsetLeft - speed +'px';
  };
  function Move(){
    clearInterval(timer);
  };
  function Out(){
    timer = setInterval(toPlay,30); 
  };
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr]; 
  }else{
    return getComputedStyle(obj,false)[attr]; 
  }
};
function $(id){
  return document.getElementById(id);
}
</script>  
</body>
</html>

向右无缝滚动　　

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>向左无缝滚动</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
*{
	margin: 0px; padding: 0px; font-size:14px; font-family:'微软雅黑';
}
.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block;}
* html .clearfix{height:1%}
.clearfix{display:black;}
ul li{
  list-style:none;
}
#box{
  position:relative; width:520px;height:120px;margin:50px auto; overflow:hidden;
}
#box ul{
  position:absolute; top:0px; left:0px; height:120px;
}
#box ul li{
  width:120px; height:120px; background:green; float:left;display:inline; cursor:pointer;
  font-size:40px; color:#fff; text-align:center; line-height:120px; margin:0 5px;
}
</style>
</head>
<body>
<div id='box'>
	<ul class='clearfix'>
        <li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
</div>
<script type="text/javascript">
window.onload = function(){
  var oBox = $('box');
  var oUl = oBox.getElementsByTagName('ul')[0];
  var oLi = oUl.getElementsByTagName('li');
  var timer = null;
  var speed = 2;
  oUl.innerHTML += oUl.innerHTML;
  var oW = parseInt(getStyle(oLi[0],'width'))+10;
  oUl.style.width = oW*oLi.length+'px';
  toPlay();
  timer = setInterval(toPlay,30);
  oUl.onmousemove = Move;
  oUl.onmouseout = Out;
  function toPlay(){
    if(oUl.offsetLeft>0){
		oUl.style.left= -oUl.offsetWidth/2+'px';
	}
	oUl.style.left = oUl.offsetLeft + speed +'px';
  };
  function Move(){
    clearInterval(timer);
  };
  function Out(){
    timer = setInterval(toPlay,30); 
  };
}
function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr]; 
  }else{
    return getComputedStyle(obj,false)[attr]; 
  }
};
function $(id){
  return document.getElementById(id);
}
</script>  
</body>
</htm

转载于:https://www.cnblogs.com/xiaoxiaosha/p/3632579.html