JavaScript--(JS Magnifier effect)

<style>

* {

margin:0;

padding:0;

}

</style>

<script type = "Text/javascript" >

var BODY = document.getelementsbytagname (' body ') [0];

var box1 = document.createelement (' div ');

var box2 = document.createelement (' div ');

var mask = document.createelement (' div ');//Mask Layer

var minimg = document.createelement (' img ');

var maximg = document.createelement (' img ');

Set the properties of a label

Box1.style.width = ' 300px ';

Box1.style.height = ' 300px ';

box1.style.position = ' absolute ';

Box1.style.left = 0;

box1.style.top = 0;

Box2.style.width = ' 500px ';

Box2.style.height = ' 500px ';

box2.style.position = ' absolute ';

Box2.style.left = ' 300px ';

Box2.style.top = ' 0 ';

Box2.style.display = ' None ';

Box2.style.overflow = ' hidden ';

MINIMG.SRC = "Img/01.png";

Minimg.style.width = ' 100% ';

Minimg.style.height = ' 100% ';

minimg.style.position = ' absolute ';

Mask.style.width = ' 60px ';

Mask.style.height = ' 60px ';

mask.style.position = ' absolute ';

Mask.style.background = ' Blue ';

mask.style.opacity = ' 0.3 ';

Mask.style.display = ' None ';

　　

MAXIMG.SRC = "Img/01.png";

Maximg.style.width = ' 2500px ';

Maximg.style.height = ' 2500px ';

maximg.style.position = ' absolute ';

Box1.onmousemove

Box1.onmousemove = function (event) {

event = event| | window.event;

Show Mask, Box2

Box2.style.display = ' block ';

Mask.style.display = ' block ';

Get the position of mouse movement

var EvX = Event.clientx;

var EvY = Event.clienty;

The center point of the mask follows the mouse movement

var Maskcenterx = EVX-MASK.OFFSETWIDTH/2;

var maskcentery = EVY-MASK.OFFSETHEIGHT/2;

The value of the left and top of mask is determined by the condition of the box1 within the range.

if (Maskcenterx < 0) {

Maskcenterx = 0;

} else if (Maskcenterx >= (box1.offsetwidth-mask.offsetwidth)) {

Maskcenterx = Box1.offsetwidth-mask.offsetwidth;

}

if (Maskcentery < 0) {

maskcentery = 0;

} else if (Maskcentery >= (box1.offsetheight-mask.offsetheight)) {

Maskcentery = Box1.offsetheight-mask.offsetheight;

}

Mask.style.left = Maskcenterx + ' px ';

Mask.style.top = maskcentery + ' px ';

Get the ratio of maskcenter and (Box1.offset-mask.offset)

var ScaleX = Maskcenterx/(box1.offsetwidth-mask.offsetwidth);

var ScaleY = maskcentery/(box1.offsetheight-mask.offsetheight);

The box2 is calculated by the ratio of the moving volume, so that its large image display

Box2.scrollleft = (maximg.offsetwidth-box2.offsetwidth) * ScaleX;

Box2.scrolltop = (maximg.offsetheight-box2.offsetheight) * ScaleY;

}

Box1.onmouseleave

Box1.onmouseleave = function () {

Mask.style.display = ' None ';

Box2.style.display = ' None ';

}

　　

Box1.appendchild (MINIMG);

Box1.appendchild (mask);

Box2.appendchild (MAXIMG);

Body.appendchild (Box1);

Body.appendchild (BOX2);

</script>

JavaScript--(JS Magnifier effect)