JavaScript 画像拡大効果 function_image 特殊効果-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript 画像拡大効果 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;" (遅延モード、^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>
PS: ff での問題 (ff で Web ページの読み込みが遅すぎる場合、画像サイズが取得できない可能性があります) を回避するには、onload でコードを実行するのが最善です。
更新: 2009-11-15 21:40、danica7773 のおかげで、彼の提案に従って、カスタム表示レイヤー スタイル、イベントの表示と非表示を追加しました。
</div>

[Ctrl A すべて選択注:

外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

imageZoom .js コードをコピー

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

/* 
*著者:sohighthesky 
*日付:2009-11-14 
*/ 
/* 
*img は拡大する画像またはその ID を指定します
*options: コード内の setOptions のコメントを参照してください。 
*/ 
var imageZoom = function(img,options) { 
 this.img=this.g(img); (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(); 
imageZoom。プロトタイプ= { 
 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); // 要素の座標を取得します 
 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,//デフォルトは拡大しない (画像の元のサイズを表示します) 
 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); > 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; 
 varload=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 までご連絡ください。

JavaScriptのデータ型：ブラウザとNodejsに違いはありますか？May 14, 2025 am 12:15 AM

JavaScriptコアデータ型は、ブラウザとnode.jsで一貫していますが、余分なタイプとは異なる方法で処理されます。 1）グローバルオブジェクトはブラウザのウィンドウであり、node.jsのグローバルです2）バイナリデータの処理に使用されるNode.jsの一意のバッファオブジェクト。 3）パフォーマンスと時間の処理にも違いがあり、環境に従ってコードを調整する必要があります。

JavaScriptコメント：//および / * *を使用するためのガイドMay 13, 2025 pm 03:49 PM

javascriptusestwotypesofcomments：シングルライン（//）およびマルチライン（//）

Python vs. JavaScript：開発者の比較分析May 09, 2025 am 12:22 AM

PythonとJavaScriptの主な違いは、タイプシステムとアプリケーションシナリオです。 1。Pythonは、科学的コンピューティングとデータ分析に適した動的タイプを使用します。 2。JavaScriptは弱いタイプを採用し、フロントエンドとフルスタックの開発で広く使用されています。この2つは、非同期プログラミングとパフォーマンスの最適化に独自の利点があり、選択する際にプロジェクトの要件に従って決定する必要があります。

Python vs. JavaScript：ジョブに適したツールを選択するMay 08, 2025 am 12:10 AM

PythonまたはJavaScriptを選択するかどうかは、プロジェクトの種類によって異なります。1）データサイエンスおよび自動化タスクのPythonを選択します。 2）フロントエンドとフルスタック開発のためにJavaScriptを選択します。 Pythonは、データ処理と自動化における強力なライブラリに好まれていますが、JavaScriptはWebインタラクションとフルスタック開発の利点に不可欠です。

PythonとJavaScript：それぞれの強みを理解するMay 06, 2025 am 12:15 AM

PythonとJavaScriptにはそれぞれ独自の利点があり、選択はプロジェクトのニーズと個人的な好みに依存します。 1. Pythonは、データサイエンスやバックエンド開発に適した簡潔な構文を備えた学習が簡単ですが、実行速度が遅くなっています。 2。JavaScriptはフロントエンド開発のいたるところにあり、強力な非同期プログラミング機能を備えています。 node.jsはフルスタックの開発に適していますが、構文は複雑でエラーが発生しやすい場合があります。

JavaScriptのコア：CまたはCの上に構築されていますか？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc;それは、解釈されていることを解釈しました。

JavaScriptアプリケーション：フロントエンドからバックエンドまでMay 04, 2025 am 12:12 AM

JavaScriptは、フロントエンドおよびバックエンド開発に使用できます。フロントエンドは、DOM操作を介してユーザーエクスペリエンスを強化し、バックエンドはnode.jsを介してサーバータスクを処理することを処理します。 1.フロントエンドの例：Webページテキストのコンテンツを変更します。 2。バックエンドの例：node.jsサーバーを作成します。

Python vs. Javascript：どの言語を学ぶべきですか？May 03, 2025 am 12:10 AM

PythonまたはJavaScriptの選択は、キャリア開発、学習曲線、エコシステムに基づいている必要があります。1）キャリア開発：Pythonはデータサイエンスとバックエンド開発に適していますが、JavaScriptはフロントエンドおよびフルスタック開発に適しています。 2）学習曲線：Python構文は簡潔で初心者に適しています。 JavaScriptの構文は柔軟です。 3）エコシステム：Pythonには豊富な科学コンピューティングライブラリがあり、JavaScriptには強力なフロントエンドフレームワークがあります。

See all articles