JavaScript 画像拡大効果 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;" (遅延モード、^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> 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);
}
};