자바스크립트 이미지 확대 효과 function_image 특수 효과-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 18:41:33

원래의

1104명이 탐색했습니다.

<div class="test" id="div1">
<h3>시연예</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 id="img1" alt="彤" src="http://www.jb51.net/upload/2009-11/20091115231842561.jpg">
</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 id="img2"   style="max-width:90%" alt="avril" src="http://www.jb51.net/upload/2009-11/20091115231842599.jpg">
<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 id="img3"   style="max-width:90%" alt="王心凌" src="http://files.jb51.net/demoimg/200911/o_wanx.jpg">
<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 id="img4"   style="max-width:90%" alt="" src="http://www.jb51.net/upload/2009-11/20091115231842981.jpg"> </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); 
    } 
};