Home > Article > Web Front-end > js picture magnification effect revised version_image special effects

js picture magnification effect revised version_image special effects

WBOYOriginal: 2016-05-16 18:26:511164browse

First: we need a movable DIV

Copy code The code is as follows:

var getMouseP=function (e){//To get the mouse coordinates, please pass the evnet parameter
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);//Get the current mouse coordinates
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");

Then: we need to control him The movement range of

Copy the code The code is as follows: