手机页面图片添加css动画,手指触摸时,图片消失

html-css011

手机页面图片添加css动画,手指触摸时,图片消失,第1张

你是指出现这个问题还是想 实现这个效果?

移动端的触摸事件有:

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>