縱向圖片滾動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   id="dge4zq7"   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   class="wbuoizq"   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訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些