Images_javascript 기술의 마우스 스크롤 휠 확대/축소와 완벽하게 호환되는 JavaScript로 구현된 코드

코드는

코드 복사 코드는

/*!
*작성자: Images_javascript 기술의 마우스 스크롤 휠 확대/축소와 완벽하게 호환되는 JavaScript로 구현된 코드
*블로그:http://www.cnblogs.com/Images_javascript 기술의 마우스 스크롤 휠 확대/축소와 완벽하게 호환되는 JavaScript로 구현된 코드
*날짜:2010-2-4
*/
var Zooming=function(e) {
e= window.event ||e;
var o=this,data=e.wheelDelta || e.detail*40,zoom,size
if(! 'v1') 🎜>zoom = parsInt( o.style.zoom) || 100;
zoom = 데이터 / 12
if(zoom > Zooming.min)
o.style.zoom = 줌 '%' ;
}else {
size=o.getAttribute("_zoomsize").split(",")
zoom=parseInt(o.getAttribute("_zoom"))
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";
}
}
}; ){//첫 번째 각 매개변수는 확대/축소할 수 있는 이미지를 지정하고, min은 최소 확대/축소 크기를 지정하며, 기본값은 50입니다.
zooming.min=min || 50
obj.onmousewheel=zooming; (/a/[-1 ]=='a')//if Firefox
obj.addEventListener("DOMMouseScroll",zooming,false)
if(-[1,]){//그렇지 않은 경우 IE
obj.setAttribute ("_zoomsize",obj.offsetWidth "," obj.offsetHeight)
}
}

window.onload=function(){//넣기 그렇지 않으면 onload에 포함되지 않습니다. 즉, 이미지 크기를 계산하는 데 오류가 발생합니다.
zooming.add(document.getElementById("testimg1"))
}


데모 코드

이미지를 확대하려면 마우스를 스크롤하세요 <title> </title> <meta name="author" content="Images_javascript 기술의 마우스 스크롤 휠 확대/축소와 완벽하게 호환되는 JavaScript로 구현된 코드"> <meta name="Keywords" content="鼠标滚动缩放图片，兼容IE,FF,Chrome,Safari,Opera"> <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> 기본 최소 확대/축소는 원본 이미지의 50%입니다<div id="div1"> <img src="http://files.jb51.net/upload/2010-2/20100204144849603.jpg" id="testimg1" alt="Images_javascript 기술의 마우스 스크롤 휠 확대/축소와 완벽하게 호환되는 JavaScript로 구현된 코드"><div>스크립트 하우스</div> <div> <a href="http://www.jb51.net"> </a> </div> </div>
[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다. ]ps : 이 페이지에는 스크롤바가 있기 때문에 페이지에 직접 배치하면 그림 대신 페이지가 스크롤됩니다. 해결 방법이 있는지 모르겠습니다.