您的位置：首页 > 其它

鼠标滚动缩放图片效果

2013-10-09 09:53 176 查看

前段时间本人在做项目时，做了一个鼠标滚动缩放图片效果，图片支持多个，多个图片循环缩放，花了点时间整理了下，把它贴出来，与大家分享下，在ie6.0,ie7.0,firefox都测试过，没有问题。

<html>

<head>

<title>鼠标滚动图片缩放</title>

<script language="javascript">

if (window.addEventListener)

{

window.addEventListener('DOMMouseScroll', wheel, false);//给firefox添加鼠标滚动事件

}

function wheel(event)

{

return wheelimg(event);

}

function bbimg()

{

var div = document.getElementById("div1");

var allImg = div.getElementsByTagName("IMG");

for(i=0;i<allImg.length;i++)

{

var zoom=parseInt(allImg[i].style.zoom, 10)||100;

zoom+=event.wheelDelta/12;

if (zoom>0) allImg[i].style.zoom=zoom+'%';

}

}

function wheelimg(event)

{

var delta = 0;

var div = document.getElementById("div1");

if (event.detail)

{

//如果是firefox

var allImg = div.getElementsByTagName("IMG");

var isThis=false;//现判断鼠标中仑的元素是不是包含在那个div里面

for(i=0;i<allImg.length;i++)

{

isThis=true;

allImg[i].width=allImg[i].width+event.detail*12;

event.returnValue = false;

}

}

return true;

}

</script>

</head>

<body onmousewheel="bbimg()">

<form id="form1" runat="server">

<div id="div1">

<img id="wheelimg" src="http://farm3.static.flickr.com/2782/4098845549_fe43958798.jpg" style="cursor: pointer;" border="0" />

</div>

</form>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航