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

집

웹 프론트엔드

JS 튜토리얼

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:41 PM

javascript사진 확대

<div class="test" id="div1">
<h3 id="시연예">시연예</h3>
<dl>
<dt>1. 사진과 확대에 서로 다른 이미지를 사용합니다(큰 사진과 작은 사진의 비율이 같아야 함).
확대 비율(작은 이미지를 기준으로 계산)을 지정할 수도 있습니다. <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>
</dt>
<dd>
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842561.jpg?x-oss-process=image/resize,p_40" class="lazy" id="img1" alt="彤">
</dd>
<dt>2. 같은 사진을 사용하세요.
작은 이미지의 너비 또는 높이를 설정합니다. style="height:300px;" (lazy 모드, ^o^, 다음 항목에도 동일) <pre class="brush:php;toolbar:false">new imageZoom("dd2",{//第一个参数指定一个图片或者其id（也可以为图片的容器或者id,容器中第一个子元素要为图片） 
//mul:3 
}); 
</pre>
</dt>
<dd id="dd2">
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842599.jpg?x-oss-process=image/resize,p_40" class="lazy" id="img2"   style="max-width:90%" alt="avril">
<dd id="info">
</dd>
</dd>
<dt>3. 이미지를 확대하여 지정된 컨테이너에 표시합니다<pre class="brush:php;toolbar:false">new imageZoom("img3",{ 
viewer:"imgshow"//指定要显示的div或者其id 
}) 
</pre>
</dt>
<dd>
<img src="/static/imghwm/default1.png" data-src="http://files.jb51.net/demoimg/200911/o_wanx.jpg?x-oss-process=image/resize,p_40" class="lazy" id="img3"   style="max-width:90%" alt="王心凌">
<dd>사진 미리보기:
<div id="imgshow" style="WIDTH: 534px; HEIGHT: 400px"></div>
</dd>
</dd>
<dt>4. 큰 이미지의 div를 표시하여 여러 개를 지정합니다<pre class="brush:php;toolbar:false">new imageZoom("img4",{ 
mul:5,//放大5倍 
viewerCla:"cla",//指定显示层的样式 
viewerMul:1.2//展示层以小图片的1.2倍大小 
}); 
</pre>
</dt>
<dd>
<img src="/static/imghwm/default1.png" data-src="http://www.jb51.net/upload/2009-11/20091115231842981.jpg?x-oss-process=image/resize,p_40" 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); 
    } 
};

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

Python vs. JavaScript : 개발자를위한 비교 분석May 09, 2025 am 12:22 AM

Python과 JavaScript의 주요 차이점은 유형 시스템 및 응용 프로그램 시나리오입니다. 1. Python은 과학 컴퓨팅 및 데이터 분석에 적합한 동적 유형을 사용합니다. 2. JavaScript는 약한 유형을 채택하며 프론트 엔드 및 풀 스택 개발에 널리 사용됩니다. 두 사람은 비동기 프로그래밍 및 성능 최적화에서 고유 한 장점을 가지고 있으며 선택할 때 프로젝트 요구 사항에 따라 결정해야합니다.

Python vs. JavaScript : 작업에 적합한 도구 선택May 08, 2025 am 12:10 AM

Python 또는 JavaScript를 선택할지 여부는 프로젝트 유형에 따라 다릅니다. 1) 데이터 과학 및 자동화 작업을 위해 Python을 선택하십시오. 2) 프론트 엔드 및 풀 스택 개발을 위해 JavaScript를 선택하십시오. Python은 데이터 처리 및 자동화 분야에서 강력한 라이브러리에 선호되는 반면 JavaScript는 웹 상호 작용 및 전체 스택 개발의 장점에 없어서는 안될 필수입니다.

파이썬 및 자바 스크립트 : 각각의 강점을 이해합니다May 06, 2025 am 12:15 AM

파이썬과 자바 스크립트는 각각 고유 한 장점이 있으며 선택은 프로젝트 요구와 개인 선호도에 따라 다릅니다. 1. Python은 간결한 구문으로 데이터 과학 및 백엔드 개발에 적합하지만 실행 속도가 느립니다. 2. JavaScript는 프론트 엔드 개발의 모든 곳에 있으며 강력한 비동기 프로그래밍 기능을 가지고 있습니다. node.js는 풀 스택 개발에 적합하지만 구문은 복잡하고 오류가 발생할 수 있습니다.

JavaScript의 핵심 : C 또는 C에 구축 되었습니까?May 05, 2025 am 12:07 AM

javaScriptisNotBuiltoncorc; it'SangretedLanguageThatrunsonOngineStenWrittenInc .1) javaScriptWasDesignEdasAlightweight, 해석 hanguageforwebbrowsers.2) Endinesevolvedfromsimpleplemporectreterstoccilpilers, 전기적으로 개선된다.

JavaScript 응용 프로그램 : 프론트 엔드에서 백엔드까지May 04, 2025 am 12:12 AM

JavaScript는 프론트 엔드 및 백엔드 개발에 사용할 수 있습니다. 프론트 엔드는 DOM 작업을 통해 사용자 경험을 향상시키고 백엔드는 Node.js를 통해 서버 작업을 처리합니다. 1. 프론트 엔드 예 : 웹 페이지 텍스트의 내용을 변경하십시오. 2. 백엔드 예제 : node.js 서버를 만듭니다.

Python vs. JavaScript : 어떤 언어를 배워야합니까?May 03, 2025 am 12:10 AM

Python 또는 JavaScript는 경력 개발, 학습 곡선 및 생태계를 기반으로해야합니다. 1) 경력 개발 : Python은 데이터 과학 및 백엔드 개발에 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 적합합니다. 2) 학습 곡선 : Python 구문은 간결하며 초보자에게 적합합니다. JavaScript Syntax는 유연합니다. 3) 생태계 : Python에는 풍부한 과학 컴퓨팅 라이브러리가 있으며 JavaScript는 강력한 프론트 엔드 프레임 워크를 가지고 있습니다.

JavaScript 프레임 워크 : 현대적인 웹 개발 파워May 02, 2025 am 12:04 AM

JavaScript 프레임 워크의 힘은 개발 단순화, 사용자 경험 및 응용 프로그램 성능을 향상시키는 데 있습니다. 프레임 워크를 선택할 때 : 1. 프로젝트 규모와 복잡성, 2. 팀 경험, 3. 생태계 및 커뮤니티 지원.

JavaScript, C 및 브라우저의 관계May 01, 2025 am 12:06 AM

서론 나는 당신이 이상하다는 것을 알고 있습니다. JavaScript, C 및 Browser는 정확히 무엇을해야합니까? 그들은 관련이없는 것처럼 보이지만 실제로는 현대 웹 개발에서 매우 중요한 역할을합니다. 오늘 우리는이 세 가지 사이의 밀접한 관계에 대해 논의 할 것입니다. 이 기사를 통해 브라우저에서 JavaScript가 어떻게 실행되는지, 브라우저 엔진의 C 역할 및 웹 페이지의 렌더링 및 상호 작용을 유도하기 위해 함께 작동하는 방법을 알게됩니다. 우리는 모두 JavaScript와 브라우저의 관계를 알고 있습니다. JavaScript는 프론트 엔드 개발의 핵심 언어입니다. 브라우저에서 직접 실행되므로 웹 페이지를 생생하고 흥미롭게 만듭니다. 왜 Javascr

See all articles