滚轮改变图片大小

qdrush

于 2007-09-13 14:30:00 发布

阅读量630

点赞数

分类专栏： WEB 文章标签： javascript div firefox border function html

WEB 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用鼠标滚轮实现图片缩放的方法。通过监听DOMMouseScroll和onmousewheel事件，实现在Firefox和IE浏览器中对指定div内的图片进行缩放。此功能增强了用户体验，尤其是在查看大型图片时。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>

<title>无标题页</title>

<script language="javascript">

if (window.addEventListener)

{

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

}

//else

//{

// window.onmousewheel = document.onmousewheel = wheel;//ie

//}

function wheel(event)

{

var delta = 0;

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

if (!event) /* For IE. */

{

event = window.event;

}

if (event.wheelDelta)

{

//让一个是IE

//if(event.srcElement.tagName=="IMG" && div.contains(event.srcElement))

//{

//event.srcElement.width+=event.wheelDelta/15;

// return false;

//}

}

else if (event.detail)

{

//如果是firefox

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

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

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

{

if(allImg[i]==event.target)

{

isThis=true;

}

}

if(isThis && event.target.tagName=="IMG")

{

event.target.width=event.target.width+event.detail*12;

event.returnValue = false;

}

}

return true;

}

function bbimg(o)

{

var zoom=parseInt(o.style.zoom, 10)||100;

zoom+=event.wheelDelta/12;

if (zoom>0) o.style.zoom=zoom+'%';

return false;

}

</script>

</head>

<body>

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

<div>

<div id="div1"

<table class="tablebody2" style="table-layout:fixed;" border="0" width="90%">

<tr>

<td>

<img id="11" src="UserFolder/00.jpg" onclick="javascript:window.open(this.src);"

style="cursor: pointer;" onload="javascript:if(this.width>screen.width-500)this.style.width=screen.width-500;"

onmousewheel="return bbimg(this)" border="0" />

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。