点击鼠标上下滚动
2017-12-28 12:06
316 查看
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style type="text/css"> #box{z-index: 10; width: 200px; position:relative; top:40px; } .img {height: 100px; width: 200px; border-bottom:1px solid #ccc; } .img img{ height: 100px; width: 200px; } input{ width: 200px; height: 40px; } #btn1{ top: 0;position: absolute;z-index: 10000 } #btn2{ bottom:0px;position: absolute;z-index: 10000 } #aa{ width: 200px; height: 280px;position:relative;overflow: hidden;} </style> </head> <script> window.onload = function(){ var oBtn1 = document.getElementById('btn1') var oBtn2 = document.getElementById('btn2') var oBox = document.getElementById('box') var timerUp = null; var timerDown = null; function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } // 设置向上按钮按下的动作 oBtn1.onmousedown = function(){ timerUp = setInterval(function(){ if (parseInt(getStyle(oBox , 'top')) > - 165) { oBox.style.top = parseInt(getStyle(oBox,'top')) - 5 +'px' } else { oBox.style.top = '-165px' } },100) } // 设置向上按钮抬起的动作 oBtn1.onmouseup = function(){ clearInterval(timerUp) } // 设置按钮按下的动作 oBtn2.onmousedown = function(){ timerDown = setInterval(function(){ if (parseInt(getStyle(oBox , 'top')) < 40) { oBox.style.top = parseInt(getStyle(oBox , 'top')) + 5 +'px'; } else { oBox.style.top = '40px'; } },100); } // 设置向下按钮抬起的动作 oBtn2.onmouseup = function(){ clearInterval(timerDown) } } </script> <body> <div id="aa"> <input id="btn1" type="button" value="上按钮" /> <div id="box"> <div class="img"><img src="img/1.png"></div> <div class="img"><img src="img/2.png"></div> <div class="img"><img src="img/3.png"></div> <div class="img"><img src="img/4.png"></div> </div> <input id="btn2" type="button" value="下按钮" /> </div> </body> </html>
相关文章推荐
- 滚动条响应鼠标滑轮事件实现上下滚动的js代码
- TextSwitcher上下滚动的实现和处理点击事件
- 图片上下滑动(鼠标点击才动)
- javaScript判断鼠标滚轮的上下滚动
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
- 仿大众点评店铺详情的上下滚动、横向tab联动,标题滑动悬停到顶部,点击tab滚动到相应模块
- js判断鼠标滚轮上下滚动
- 鼠标上下滚动跳转页面。
- easyui datagrid 实现鼠标滚动翻页效果(不是点击下一页)
- js鼠标滚轮上下滚动监听事件应用实例(跨浏览器,亲测)
- 文本框内容滚动(点击上下,文字上滚与下滚)
- 通知公告TextSwitcher自动上下滚动带点击事件
- 在表单上任意位置滑动鼠标滚轮来使表单上下滚动
- jq鼠标点击滚动锚点
- Unity鼠标中键滚动缩放相机,左键点击场景中模型居中显示
- 鼠标点击图片翻转,滚动放大
- jquery特效-鼠标点击上下伸缩式菜单
- 监测鼠标滚轮的上下滚动来实现导航条显示隐 4000 藏
- jquery鼠标移动div内容上下左右滚动
- 图片并排向左或向右滚动,鼠标点击可进入看大图