JavaScript で実装されたコードは、images_javascript スキルのマウス スクロール ホイール ズームと完全に互換性があります。

コードは次のとおりです:

コードをコピー コードは次のとおりです:

/*!
*著者: JavaScript で実装されたコードは、images_javascript スキルのマウス スクロール ホイール ズームと完全に互換性があります。
*ブログ:http://www.cnblogs.com/JavaScript で実装されたコードは、images_javascript スキルのマウス スクロール ホイール ズームと完全に互換性があります。
*日付:2010-2-4
*/
varzooming=function(e) {
e= window.event ||e;
var o=this,data=e.wheelDelta || e.detail*40,zoom,size;
if(! 'v1') 🎜>zoom = parseInt(o.style.zoom) || 100;
zoom = data / 12;
if(zoom >zooming.min)
o.style.zoom = '%' ;
}else {
size=o.getAttribute("_zoomsize").split(",");
zoom=parseInt(o.getAttribute("_zoom")) ||100; >zoom =data/12 ;
if(zoom>zooming.min){
o.setAttribute("_zoom",zoom);
o.style.width=size[0]*zoom/100 "px";
o.style.height=size[1]*zoom/100 "px";
}
}
zooming.add=function(obj,min) )//First 各パラメータはズームできる画像を指定します。min は最小ズーム サイズを指定します。デフォルトは 50
obj.onmousewheel=zooming; (/a/[-1 ]=='a')//Firefox の場合
obj.addEventListener("DOMMouseScroll",zooming,false){//そうでない場合IE
obj.setAttribute ("_zoomsize",obj.offsetWidth "," obj.offsetHeight);
}
};

window.onload=function(){// onload では、それ以外の場合は ie にはなりません。画像サイズの計算でエラーが発生します。
zooming.add(document.getElementById("testimg1"))
}


デモコード

マウスをスクロールして画像をズームします

<title> </title> <meta name="author" content="JavaScript で実装されたコードは、images_javascript スキルのマウス スクロール ホイール ズームと完全に互換性があります。"> <meta name="Keywords" content="鼠标滚动缩放图片，兼容IE,FF,Chrome,Safari,Opera">デフォルトの最小ズームは元の画像の 50% です<style type="text/css"> /* pre style*/ body,th,td {font-size:12px;font-family:Verdana,Tahoma,Arial,'5b8b4f53','5FAE8F6F96C59ED1',sans-serif;} body,th,td,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input,button,textarea,p {margin:0;padding:0;} li { list-style-type:none;} a {color:#3366CC; text-decoration:none;} a:hover {color:#FF6600;text-decoration:underline;} /************************************************************/ #div1 {width:300px;margin:100px 35%;line-height:22px;} </style> スクリプト ハウス<div id="div1"> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/2010-2/20100204144849603.jpg" class="lazy" id="testimg1" alt="JavaScript で実装されたコードは、images_javascript スキルのマウス スクロール ホイール ズームと完全に互換性があります。"> <div> </div> <div> <a href="http://www.jb51.net"> </a> </div> </div> [Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります
]ps : このページにはスクロールバーがあるため、ページ上に直接配置すると、画像の代わりにページがスクロールしてしまいます。解決策があるかどうかはわかりません。