鼠标滚轮实现图片缩放代码,Asp.Net代码库,德仔网

代码语言
代码分类
【Asp.Net】鼠标滚轮实现图片缩放
作者:Dezai.CN / 发布于2013/2/20/ 3424
<mce:script   language="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;   
}     
// --></mce:script>   
    
     
<img   src='../FloorPicture/<%#DataBinder.EvalContainer.DataItem,"picture")%>'      

   onload="javascript:

   if(this.width>screen.width*0.7)

      this.style.width=screen.width*0.7;"  

   onmousewheel="return   bbimg(this)">
 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用滚轮实现图片缩放</title>
</head>
<mce:script language="JavaScript"><!--
    function zoomimg(img){
    //img.style.zoom获取img对象的缩放比例，并转为十进制整数
    var zoom = parseInt(img.style.zoom,10);
    if (isNaN(zoom)){    //当zoom非数字时zoom默认为100％
    zoom = 100;
    }
    //event.wheelDelta滚轮移动量上移＋120，下移－120；显示比例每次增减10％
    zoom += event.wheelDelta / 12;
    //当zoom大于10％时重新设置显示比例
    if (zoom>10) img.style.zoom = zoom + "%";
    }
// --></mce:script>
<body>

<!--onmousewheel：当滚轮移动时触发-->
<img src="图片路径" mce_src="图片路径" onmousewheel="zoomimg(this)">
</body>
</html>




<mce:scriptlanguage="javascript">
<!--
//图片按比例缩放,可输入参数设定初始大小
functionresizeimg(ImgD,iwidth,iheight) {varimage=newImage();
image.src=ImgD.src;if(image.width>0 && image.height>0){if(image.width/image.height>= iwidth/iheight){if(image.width>iwidth){
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}else{if(image.height>iheight){
ImgD.height=iheight;
ImgD.width=(image.width*iheight)/image.height;
}else{
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
　　　　　ImgD.style.cursor="pointer";//改变鼠标指针
　　　　　ImgD.onclick =function() {window.open(ImgD.src);}//点击打开大图片
　　　　if(navigator.userAgent.toLowerCase().indexOf("ie") > -1) {//判断浏览器，如果是IE
　　　　　　ImgD.title ="请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
　　　　　　ImgD.onmousewheel =functionimg_zoom()//滚轮缩放
　　　　　 {
　　　　　　　　　　varzoom = parseInt(this.style.zoom, 10) || 100;
　　　　　　　　　　zoom +=event.wheelDelta / 12;
　　　　　　　　　　if(zoom> 0)　this.style.zoom = zoom +"%";
　　　　　　　　　　returnfalse;
　　　　　 }
　　　  }else{//如果不是IE
　　　　　　　     ImgD.title ="点击图片可在新窗口打开";
　　　　　　   }
}
}
// -->
</mce:script>


<imgsrc="http://www.chenjiliang.com/Article/ArticleImage/100/2176/SideFilter9.jpg"onload="javascript.:resizeimg(this,100,200)">
试试其它关键字
　图片缩放　
同语言下
可能有用的
Dezai.CN贡献的其它代码(4037)