纵向图片滚动JS代码_图片特效特效

纵向的Js图片滚动代码，感应鼠标动作，当鼠标靠近图片两端时就自动滚动了，好像大家用横向的比较多一些，竖向的也是很有个性和特色的。

<html >
<head>
<title>纵向滚动控制</title>
<style type="text/css">
*{padding:0;margin:0;}
a{font-size:12px;text-decoration:none;color:#6B90DA;}
.wrap{position:relative;overflow:hidden;width:140px;}
#rollBox{margin:30px 0;height:360px;overflow:hidden;}
#rollList li{height:106px;overflow:hidden;text-align:center;padding-top:13px;}
#rollList li img{display:block;margin:0 auto;border:1px solid #efefef;}
.rollMenu{position:absolute;width:140px;height:30px;line-height:30px;font-size:30px;text-align:center;}
#rollUp{top:0px;}
#rollDown{bottom:0px;}
</style>
</head>
<body>
<div class="wrap">
<a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollUp" class="rollMenu">▲</a>
<a onmouseout="scrollVert.stop();" onmouseover="scrollVert.play(this);" href="javascript:;" id="rollDown" class="rollMenu">▼</a>
<div id="rollBox">
	<ul id="rollList">
		<li>
		<a href="#"><img height="80" width="114"  src="http://p1.mb5u.com/texiao/1/20110225160554617.jpg"/>我的相册</a>
		</li>
		<li>
		<a href="#"><img height="80" width="114"  src="http://p1.mb5u.com/texiao/1/20110225160554618.jpg"/>我的相册</a>
		</li>
		<li>
		<a href="#"><img height="80" width="114"  src="http://p1.mb5u.com/texiao/1/20110225160554619.jpg"/>我的相册</a>
		</li>
		<li>
		<a href="#"><img height="80" width="114"  src="http://p1.mb5u.com/texiao/1/20110225160554620.jpg"/>我的相册</a>
		</li>
	</ul>
</div>
<script type="text/javascript">
var $id=function(id){ return document.getElementById(id);}
var scrollVert={
locked: 0,
vector: 0,
play:function(thiso){
	if (scrollVert.locked == 0) {
		if (thiso.id == 'rollUp') {
			scrollVert.vector = 1;
		}
		if (thiso.id == 'rollDown') {
			scrollVert.vector = -1;
		}
		roll = setInterval(function(){
			$id('rollBox').scrollTop+=scrollVert.vector;
		}, 10);
		scrollVert.locked = 1;
	}
},
stop: function(){
	if (window.roll) {
		clearInterval(window.roll);
		scrollVert.locked = 0;
	}
}
}
</script>
</div>
</body>
</html>

所属频道：图片特效特效/更新时间：2012-11-13

[收藏][报错][返回列表]

纵向图片滚动JS代码_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些