向左右上下滚动简单javascript

最新推荐文章于 2024-06-29 16:57:52 发布

acb9900

最新推荐文章于 2024-06-29 16:57:52 发布

阅读量161

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/glelaine/archive/2012/07/11/scroll.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=utf-8" />
<title>向左右上下滚动简单javascript</title>
<style type="text/css">
*{padding: 0; margin: 0;}
#scroll{ width: 200px; overflow: hidden; height: 100px; margin: 0 auto; border: 1px solid #ccc; position: relative; }
#scroll ul{ position: absolute; top: 0; left: 0; }
#scroll span{ cursor: pointer; background: red; }
#scroll ul li{ width: 50px ; height: 100px; background: green; display: block; float: left; margin-right: 5px; }

#scroll-left{ height: 400px; overflow: hidden; width: 60px; margin: 0 auto; border: 1px solid #f00; position: relative; }
#scroll-left ul{ position: absolute; top: 0; left: 0; }
#scroll-left span{ cursor: pointer; background: red; }
#scroll-left ul li{ width: 50px ; height: 100px; background: green; display: block; margin: 5px 0 5px 5px; }
</style>
</head>

<div style="width: 700px; margin: 0 auto; border: 1px solid #ccc;">
<span>上</span>

<div id="scroll-left">

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>

</div>

<span>下</span>
</div>
<script type="text/javascript">
window.onload = function(){
/*var scro = document.getElementById("scroll");
var oUl = scro.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oA = document.getElementsByTagName("span");

var iNum = 4
var iSpeed = 2;
var timer = null;

oUl.innerHTML += oUl.innerHTML;
oUl.style.width = (oLi[0].offsetWidth * oLi.length) + "px";

function getRight(){
oUl.style.left = oUl.offsetLeft + iSpeed + "px";
if(oUl.offsetLeft + 25 <-oUl.offsetWidth/2){
oUl.style.left = "0px";
}else if(oUl.offsetLeft>0){
oUl.style.left = ((-oUl.offsetWidth/2)-25)+"px";
}
}

timer = setInterval(getRight,30);

oA[0].onclick = function(){
iSpeed = -2;
}

oA[1].onclick = function(){
iSpeed = 2;
}

oUl.onmouseover = function(){
clearInterval(timer);
}

oUl.onmouseout = function(){
timer = setInterval(getRight,30);
}*/

var scro = document.getElementById("scroll-left");
var oUl = scro.getElementsByTagName("ul")[0];
var oLi = oUl.getElementsByTagName("li");
var oA = document.getElementsByTagName("span");

var iNum = 4
var iSpeed = 2;
var timer = null;

oUl.innerHTML += oUl.innerHTML;
oUl.style.height = (oLi[0].offsetHeight * oLi.length) + "px";

function getTop(){
oUl.style.top = oUl.offsetTop + iSpeed + "px";
if(oUl.offsetTop + 25 <-oUl.offsetHeight/2){
oUl.style.left = "0px";
}else if(oUl.offsetTop>0){
oUl.style.top = ((-oUl.offsetHeight/2)-25)+"px";
}
}

timer = setInterval(getTop,30);

oA[2].onclick = function(){
iSpeed = -2;
}

oA[3].onclick = function(){
iSpeed = 2;
}

oUl.onmouseover = function(){
clearInterval(timer);
}

oUl.onmouseout = function(){
timer = setInterval(getTop,30);
}

}

</script>
</body>
</html>

转载于:https://www.cnblogs.com/glelaine/archive/2012/07/11/scroll.html

acb9900

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
向左右上下滚动简单javascript

<!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><met...
复制链接

扫一扫