자바스크립트 이미지 확대 효과 function_image 특수 효과

<style type="text/css"> /*pre css reset*/ body,th,td { font-size:12px;font-family:Tahoma,Helvetica,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; } fieldset,img { border:none; } a {color:#3366CC; text-decoration:none;outline:none;} a:hover {color:#FF6600;text-decoration:underline;} /************************************************************/ .test { } .test h3{ margin:10px auto;} .test dt {line-height:25px;margin-top:5px;} .cla {border:solid 1px #09c;} </style> <div class="test" id="div1"> <h3 id="시연예">시연예</h3> <dl> <dt>1. 사진과 확대에 서로 다른 이미지를 사용합니다(큰 사진과 작은 사진의 비율이 같아야 함). 확대 비율(작은 이미지를 기준으로 계산)을 지정할 수도 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img1",{ //mul:6,//指定放大的倍数 onShow:function() { document.title="show,you are moving on the image."; }, onHide:function() { document.title="you mouse move out the image"; }, bigImg:"../images/tong.jpg"//指定放大图片路径 }); </pre><div class="contentsignin">로그인 후 복사</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842561.jpg" class="lazy" id="img1" alt="彤"> </dd> <dt>2. 같은 사진을 사용하세요. 작은 이미지의 너비 또는 높이를 설정합니다. style="height:300px;" (lazy 모드, ^o^, 다음 항목에도 동일) <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） //mul:3 }); </pre><div class="contentsignin">로그인 후 복사</div></div> </dt> <dd id="dd2"> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842599.jpg" class="lazy" id="img2" style="max-width:90%" alt="avril"> <dd id="info"> </dd> </dd> <dt>3. 이미지를 확대하여 지정된 컨테이너에 표시합니다<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img3",{ viewer:"imgshow"//指定要显示的div或者其id }) </pre><div class="contentsignin">로그인 후 복사</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://files.jb51.net/demoimg/200911/o_wanx.jpg" class="lazy" id="img3" style="max-width:90%" alt="王心凌"> <dd>사진 미리보기: <div id="imgshow" style="WIDTH: 534px; HEIGHT: 400px"></div> </dd> </dd> <dt>4. 큰 이미지의 div를 표시하여 여러 개를 지정합니다<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">new imageZoom("img4",{ mul:5,//放大5倍 viewerCla:"cla",//指定显示层的样式 viewerMul:1.2//展示层以小图片的1.2倍大小 }); </pre><div class="contentsignin">로그인 후 복사</div></div> </dt> <dd> <img src="/static/imghw/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842981.jpg" class="lazy" id="img4" style="max-width:90%" alt=""> </dd> </dl> <a href="http://files.jb51.net/imgby/imageZoom.js" target="_blank">js 소스 코드를 다운로드하려면 클릭하세요</a> 추신: ff에서 문제를 방지하려면(ff에서 웹 페이지가 너무 느리게 로드되면 이미지 크기를 얻지 못할 수 있음) onload에서 코드를 실행하는 것이 가장 좋습니다. 업데이트: 2009-11-15 21:40, danica7773 덕분에 그의 제안에 따라 사용자 정의 디스플레이 레이어 스타일을 추가하고 이벤트를 표시하고 숨깁니다. </div>
[Ctrl A 모두 선택 참고:

외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]

imageZoom .js 코드 복사

코드는 다음과 같습니다.

/*
*저자:sohighthesky
*날짜:2009-11-14
*/
/*
*img는 확대할 이미지 또는 ID를 지정합니다.
*options: 코드의 setOptions에 있는 주석을 참조하세요.
*/
var imageZoom = function(img,options) {
this.img=this.g(img)
if (this .img.nodeName!="IMG") {
If(this.img && this.img.children[0].nodeName=="IMG")this.img=this.img.children[0] ;
else throw Error("잘못된 인수 [img] !");
}
this.setOptions(options)
this.init(); 프로토타입= {
g:function(id) {return typeof(id)=="string"?document.getElementById(id):id;},
ae:function(el,type,call) {
if(el.addEventListener)el.addEventListener(type,call,false)
else el.attachEvent("on" type,call)
},
getPos:function(o){ // 요소 좌표 가져오기
var x = 0, y = 0;
do{x = o.offsetLeft; y = o.offsetTop;}
while(o=o.offsetParent); return { 'x':x,'y':y};
},
setOptions:function(options) {
this.options={
mul:0,//기본값은 다음과 같습니다. not to 확대 ( 이미지 원본 크기 표시)
bigImg:null, //확대 이미지 경로 지정 (작은 이미지에 비례해야 함)
Viewer:null, //표시 위치 지정 ( div 또는 다른 ID일 수 있음)
viewerCla: "", // 미리보기된 div의 클래스 스타일
viewerMul:1, // 표시된 div의 배율을 지정합니다. 기본값은 원래 크기입니다. 이 매개변수 뷰어
onShow: function(){},
onHide:function(){}

for(var o in options) {this.options[o]= 설정 시 유효하지 않습니다. options[o];}
this. options.bigImg =this.options.bigImg ||this.img.src;
},
getSize:function(o) {
                  return {w: o.offsetWidth,h:o.offsetHeight};
},
createView:function() {
var _is=this.getSize(this.img);
var d=document; > if(this.options.viewer){
this.viewer=this.g(this.options.viewer);
this.viewer.style.overflow="hidden"
this.viewer. style.position="relative";
} else {
this.viewer=d.createElement("div")
this.viewer.className=this.options.viewerCla; =this.getPos(this.img);
This.viewer.style.cssText="display:none;overflow:hidden;position:absolute;top:" pos.y "px;left:" (pos.x _is.w 10) "px;높이:" _is.h*this.options.viewerMul "px;너비:" _is.w*this.options.viewerMul "px"; .viewimg=d.createElement("img") ;
this.viewimg.style.cssText="position:relative;left:-33%;top:-33%;"
this.viewimg.src =this.options.bigImg; (this.options.mul) {//배율 설정
this.viewimg.style.width=_is.w*this.options.mul "px"
This.viewimg.style.height=_is .h*this.options.mul "px"
}
        this.viewer.appendChild(this.viewimg);
    },
    move:function(e) {
        if(!this.options.mul)
         this.options.mul=this.viewimg.offsetHeight/this.img.offsetHeight;
        var pos=this.getPos(this.img);
        var l=e.clientX-pos.x (document.documentElement.scrollLeft || document.body.scrollLeft);//鼠标位置对于图文左上角的偏移
        var t=e.clientY- pos.y (document.documentElement.scrollTop || document.body.scrollTop);
        var zs=this.getSize(this.viewer);
        var pl=-l*this.options.mul zs.w/2;
        var pt=-t*this.options.mul zs.h/2;
        pl=pl>0?0:pl;
        pt=pt>0?0:pt;

var vs=this.getSize(this.viewimg);
pl=Math.max(pl,zs.w-vs.w);
pt=Math.max(pt,zs.h-vs.h);

        this.viewimg.style.left=pl "px";
        this.viewimg.style.top=pt "px";
    },
    init:function() {
     var o=this;
     var load=function(a) {//图文加载
     o.createView.call(o);
     o.img.setAttribute("alt","");
     o.ae(o.img,"mousemove",function(event){o.move.call(o,event);});
         if(!o.options.viewer) {
         o.ae(o.img,"mouseover",function(){o.options.onShow();o.viewer.style.display="" });
         o.ae(o.img,"mouseout",function(){o.options.onHide();o.viewer.style.display="none"});
         }
     };
     if(typeof(document.readyState)=="정의되지 않음" || window.opera) {
            var de=document.documentElement || 문서.본문;
            var h=de.scrollHeight;
            var t=setInterval(function() {
              if(h==de.scrollHeight){
                  clearInterval(t)
                   load();                   
               } else h=de.scrollHeight ;
            },500);
     } else if(document.readyState=="complete")
     load();
     else
     o.ae(window,"load",load);
    }
};