javascript -- (js放大镜效果)

标签：

<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‘);//遮罩层

　　var minimg = document.createElement(‘img‘);

　　var maximg = document.createElement(‘img‘);

　　//设置标签的属性

　　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;

　　　　//显示mask、box2

　　　　box2.style.display = ‘block‘;

　　　　mask.style.display = ‘block‘;

　　　　//获取鼠标移动的位置

　　　　var evX = event.clientX;

　　　　var evY = event.clientY;

　　　　//mask的中心点跟随鼠标移动

　　　　var maskCenterX = evX - mask.offsetWidth/2;

　　　　var maskCenterY = evY - mask.offsetHeight/2;

　　　　//通过条件判断让mask的left、top的取值范围在box1内

　　　　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‘;

　　　　//得到maskCenter和(box1.offset - mask.offset)的比值

　　　　var scaleX = maskCenterX / (box1.offsetWidth - mask.offsetWidth);

　　　　var scaleY = maskCenterY / (box1.offsetHeight - mask.offsetHeight);

　　　　//通过比值计算box2的移动量，使其大图显示

　　　　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放大镜效果)

标签：

原文地址：http://www.cnblogs.com/zhao12354/p/5767760.html