通过鼠标中间滚轮来缩放图片大小

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default12.aspx.cs" Inherits="Default12" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
</head>
<body>
    <form id="form1" runat="server">
        <img onmousewheel="return bbimg(this)" src="images/__scale__1_227959004.gif" />
        <span style="font-weight: bold">Size = <span id="oCounter" style="color: red;">100%</span></span>
        <img id="oImage" src="images/__scale__1_227959004.gif" onmousewheel="return Picture();" />
    </form>
</body>
</html>

<script language="JavaScript" type="text/javascript">  
function bbimg(o){
var zoom=parseInt(o.style.zoom,10)||100;
zoom+=event.wheelDelta/12;
if(zoom>0) o.style.zoom=zoom+'%';
return false;}
  
var count = 10;  
function Picture()  
{  
count = Counting(count);  
Resize(count);  
return false;  
}  

function Counting(count){  
if (event.wheelDelta >= 120)  
count++;  
else if (event.wheelDelta <= -120)  
count--;  
return count;  
}  

function Resize(count){  
if (count >=1){
document.getElementById("oImage").style.zoom = count + '0%';  
oCounter.innerText = count + '0%';  }
}  
</script>

posted on 2008-01-05 11:29  执法长老  阅读(317)  评论(0)    收藏  举报

导航