纵向滚动的图片带按钮的滚动JS代码

发布时间：2018-08-24 21:43:09 所属栏目：建站来源：站长网

导读：纵向滚动的图片带按钮的滚动JS代码纵向的Js图片滚动代码，感应鼠标动作，当鼠标靠近图片两端时就自动滚动了，好像大家用横向的比较多一些，竖向的也是很有个性和特色的 html headtitlejs纵向滚动控制 - Liehuo.Net/titlestyle type=text/css*{padding:0;

　　纵向滚动的图片带按钮的滚动JS代码

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

<html > <head> <title>js纵向滚动控制 - Liehuo.Net</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="/uploads/common/images/sliehuo_net_600x400_1.jpg"/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src="/uploads/common/images/sliehuo_net_600x400_2.jpg"/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src=""/>我的相册</a> </li> <li> <a href="#"><img height="80" width="114" src="/uploads/common/images/sliehuo_net_600x400_3.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：惠州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

纵向滚动的图片 带按钮的滚动JS代码

纵向滚动的图片带按钮的滚动JS代码