js鼠标滑轮改变图片大小_滚动鼠标放大图片代码js-CSDN博客

本文链接：https://blog.csdn.net/janus_java/article/details/54142869

<HTML>
<BODY>
<style>
a {
color: gray;
text-decoration: none;
}
a:hover {
color: #FF6600;
border-bottom: 1px dashed #666;
text-decoration: none;
}
</style>
<script>
function zoomimg(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;if (zoom>0&&zoom<=500) o.style.zoom=zoom+'%';
zoomvl.innerText=o.style.zoom;
return false;
}
function zoombig(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=10;
if(zoom>0&&zoom<=500)
o.style.zoom=zoom+'%';
zoomvl.innerText=o.style.zoom;
return false;
}
function zoomsmall(o)
{
var zoom=parseInt(o.style.zoom, 10)||100;
zoom-=10;
if (zoom>0&&zoom<=500)
o.style.zoom=zoom+'%';
zoomvl.innerText=o.style.zoom;
return false;
}
</script>
<table width="100%" border="0" style="font-family: georgia,Tahoma;font-size: 9pt;">
<tr>
<td height="300" align="center" valign=top bgcolor="#FFFFFF">
在相应区域上下滚动鼠标滚轮可以放大缩小图片或文本，当前比例：<span style="color:#FF9900" id='zoomvl'>100%</span>

<div id=thetext style="font-family: georgia,Tahoma;" onmousewheel='return zoomimg(this)'>可以用鼠标滑轮进行缩放控制的文本</div><P><a href='#' onClick="zoombig(thetext)">『放大10%』</a>
<a href='#' onClick="zoomsmall(thetext)">『缩小10%』</a>
<a href='#' onClick="thetext.style.zoom='100%';zoomvl.innerText='100%';">『恢复100%』</a><BR>