js写真拡大効果修正版
7000 ワード
まず、私たちは移動できるDIVが必要です.
var getMouseP=function (e){// evnet
e = e || window.event;
var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
return m;
};
move=function(o,t){
o=$j(o);
t=$j(t);
o.onmousedown=function(ev){
var mxy=getMouseP(ev);//
var by={x:mxy.x-(t.offsetLeft),y:mxy.y-(t.offsetTop)};
o.style.cursor="move";
document.onmousemove=function(ev){
var mxy=getMouseP(ev);
t.style.left=mxy.x-by.x+"px";
t.style.top=mxy.y-by.y+"px";
};
document.onmouseup=function(){
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
this.onmousemove=null;
}
}
}
move("jelle_test_div","jelle_test_div");
:
<br>var mp=function (e){// evnet
<br>e = e || window.event;
<br>var m=(e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : { x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop };
<br>return m;
<br>}
<br>var move2=function(o,t){// CSS position:absolute; filter:alpha(opacity=100);
<br>//o ID T ID
<br>o=$j(o);
<br>t=$j(t);
<br>by_o={x:o.offsetLeft,y:o.offsetTop};
<br>o.onmousemove=function(ev){
<br>//var mxy=Jelle.getMouseP(ev);//
<br>var by={x:t.offsetLeft,y:t.offsetTop};
<br>var ms=mp(ev);
<br>t.innerHTML=(by_o.x-by.x)+"---"+(by_o.x-by.y);
<br>jy=ms.y-by_o.y-25;
<br>jx=ms.x-by_o.x-50;
<br>maxy=415-50;//
<br>maxx=500-100;//
<br>var y=jy>=maxy?maxy:jy<=0?0:jy;
<br>var x=jx>=maxx?maxx:jx<=0?0:jx;
<br>t.style.marginTop=y+"px";
<br>t.style.marginLeft=x+"px";
<br>}
<br>}
<br>move2("jelle_warpper","jelle_move")
<br>
。 。!
x y, x y x y。
。 。
DIV DIV 。
: 800*800 200*200
DIV 200*200 div 50*50。
。 。
:
・ var $j=function(id){return document.getElementById(id);}; var getstyle=function (obj,attribute){ return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute] }; var mp=function (e,j){// evnet e = e || window.event; return (e.pageX || e.pageY)?{ x:e.pageX, y:e.pageY } : {x:e.clientX + document.body.scrollLeft - document.body.clientLeft, y:e.clientY + document.body.scrollTop - document.body.clientTop + j}; }; var sys=(function(){// , window.sys={}; var ua=navigator.userAgent.toLowerCase(); sys.firefox=ua.match(/firefox\/([\d\.]+)/); sys.ie=ua.match(/msie\s([\d\.]+)/); sys.chrome=ua.match(/chrome\/([\d\.]+)/); return sys; })() var zoomImg=function(imgs){ var o=$j("j_warp"),// t=$j("j_ms"),// div s=$j("j_show"),// div by_o={x:o.offsetLeft,y:o.offsetTop},// x,y msw=parseInt(getstyle(t,"width")),// DIV msh=parseInt(getstyle(t,"height")),// maxy=parseInt(getstyle(o,"height"))-msh,// MS_box y maxx=parseInt(getstyle(o,"width"))-msw,// MS_box x toggle=function(status){// box t.style.display=status; s.style.display=status; }, setBackgroundImg=function(imgs){ o.style.backgroundImage='url('+imgs['small']+')'; s.style.backgroundImage='url('+imgs['big']+')'; }, j=0;// --IE // -- 。 。 setBackgroundImg(imgs); if(sys.ie){ window.onscroll=function(){// N 。 。 j=parent?(parent.document.body.scrollTop+parent.document.documentElement.scrollTop) : (document.body.scrollTop+document.documentElement.scrollTop); } }; o.onmousemove=function(e){ toggle("block");// //var by={x:t.offsetLeft,y:t.offsetTop}; var ms=mp(e,j),// jy=ms.y-by_o.y-msw/2, // ms_box - - ( ) /2 jx=ms.x-by_o.x-msh/2, y= jy>=maxy ? maxy : jy<=-1? -1 : jy,// x= jx>=maxx ? maxx : jx<=-1? -1 : jx, xx= x*4 < 0 ? 0 : x*4,// box x y yy= y*4 < 0 ? 0 : y*4;// *4 4:1 4:1 // 。 ! t.style.marginTop=y+"px";// ms_box t.style.marginLeft=x+"px"; $j("j_show").style.backgroundPosition="-"+xx+"px -"+yy+"px";// xy } o.onmouseout=function(){ toggle("none"); } return setBackgroundImg;// 。 。 } //----------- var imgss=[ {'big':"//files.jb51.net/demoimg/201005/b1.jpg",'small':"//files.jb51.net/demoimg/201005/r_s1.jpg"}, {'big':"//files.jb51.net/demoimg/201005/b2.jpg",'small':"//files.jb51.net/demoimg/201005/r_s2.jpg"}, {'big':"//files.jb51.net/demoimg/201005/b3.jpg",'small':"//files.jb51.net/demoimg/201005/r_s3.jpg"}, {'big':"//files.jb51.net/demoimg/201005/b4.jpg",'small':"//files.jb51.net/demoimg/201005/r_s4.jpg"} ];//img var jelle=zoomImg(imgss[3])// ,
[Ctrl+A : Js ]