移动端的触摸事件有:
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):
touches:当前位于屏幕上的所有手指的列表。
targetTouches:位于当前DOM元素上手指的列表。
changedTouches:涉及当前事件手指的列表。
之类的 可以去w3c查一查
试试这个.
图片我用的(
new:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_03.png
old:
http://www.lanrentuku.com/lanren/png/wall_eve_harddisk/wall_eve_harddisk_12.png
)只能上传一个,自己下载下吧
<html>
<head>
<script>
window.onload = function()
{
img1.style.clip = "rect(0 256 256 0)"
img2.style.clip = "rect(0 256 0 0)"
}
function showNew()
{
window.clearInterval(myTime)
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ i +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ i +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
function showOld()
{
var i=0
var myTime = window.setInterval(function()
{
img1.style.clip = "rect("+ (256-i) +" 256 256 0)"
img2.style.clip = "rect(0 256 "+ (256-i) +" 0)"
i+=16
if(i>256)
{
window.clearInterval(myTime)
}
},1)
}
</script>
</head>
<body>
<div>
<img id="img1" src="old.png" style="position:absolute" onmouseover="showNew()" />
<img id="img2" src="new.png" style="position:absolute" onmouseout="showOld()" />
</div>
</body>
</html>