<html><head lang="en"><meta charset="UTF-8"><title></title><style>.banner{ width:300pxheight:250pxposition: relativez-index: 100background: skybluemargin:100px autooverflow:hidden } .banner .first{ left:0} .banner a{ width: 100%height: 100%position: absolutedisplay:blocktop:0left:100%} .banner a img{ width: 100%height: 100%} .banner .pre{ position: absoluteleft:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .banner .next{ position: absoluteright:0top:120pxbackground: graywidth:30pxheight:30pxborder-radius: 30pxline-height: 30pxtext-align: centeropacity: 0.4z-index: 1000cursor: pointer} .
手机移动端滑动事件当然是有的touchmove即为滑动事件
还有其他触摸事件,都给列一下:
touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
touchend事件:当手指从屏幕上离开的时候触发。
touchcancel事件:当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间,文档中并没有具体说明,咱们只能去猜测了。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#menu {
position: relative
background: black
width: 150px
height: 30px
margin: 200px auto
overflow: hidden
}
#sc {
position: absolute
background-color: #80ffff
width: 150px
height: 120px
top: 0
}
</style>
<script>
</script>
</head>
<body>
<div id="menu">
<div id="sc"></div>
</div>
<script>
var menu = document.getElementById('menu')
var sc = document.getElementById('sc')
var interval
function menuscroll() {
var top = parseFloat(sc.style.top) || sc.scrollTop
top += 10
sc.style.top = top + "px"
}
menu.onmouseenter = function() {
interval = setInterval("menuscroll()", 90)
}
menu.onmouseleave = function() {
clearInterval(interval)
sc.style.top = 0
}
</script>
</body>
</html>