面向对象放大镜

最新推荐文章于 2022-06-05 18:01:23 发布

嘻嘻蚕豆

最新推荐文章于 2022-06-05 18:01:23 发布

阅读量413

点赞数

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/BeiBeiTian/article/details/84334034

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

#box{

width: 400px;

height: 400px;

border:1px solid #ccc;

position:relative;

float:left;

background:url("1.jpg")no-repeat;

background-size:100% 100%;

}

#move{

width: 100px;

height: 100px;

position:absolute;

top:0;left:0;

background:rgba(0,0,0,0.5);

/* display:none; */

}

#div1{

width: 400px;

height: 400px;

border:1px solid #ccc;

position:relative;

float:left;

margin-left:50px;

overflow: hidden;

}

#div1 img{

width: 1000px;

height: 1000px;

position:absolute;

top:0;left:0;

}

</style>

</head>

<body>

</div>

</div>

window.οnlοad=function(){

var Box = document.getElementById("box");

var Move = document.getElementById("move");

var Div1 = document.getElementById("div1");

var Img = document.getElementById("Img");

var zoom = new Zoom(Box,Move,Div1,Img);

zoom.init();

}

function Zoom(Box,Move,Div1,Img){

this.oBox = Box;

this.oMove = Move;

this.oDiv1 = Div1;

this.oImg = Img;

}

Zoom.prototype.init = function(){

this.W = this.oBox.clientWidth*this.oDiv1.clientWidth/this.oImg.clientWidth;

this.oMove.style.width=this.W+"px";

this.oMove.style.height=this.W+"px";

var This = this;

this.oBox.onmousemove = function(ev){

var evt=ev||event;

This.fnMove(evt);

}

Zoom.prototype.fnMove = function(evt){

var CX=evt.clientX-80;

var CY=evt.clientY-80;

if(CX<0){

CX=0;

}

if(CY<0){

CY=0;

}

if(CX>this.oBox.clientWidth-this.oMove.clientWidth){

CX = this.oBox.clientWidth-this.oMove.clientWidth;

}

if(CY > this.oBox.clientHeight-this.oMove.clientHeight){

CY = this.oBox.clientHeight-this.oMove.clientHeight;

}

this.oMove.style.left=CX+"px";

this.oMove.style.top=CY+"px";

var a=CX*1000/400;

var b=CY*1000/400;

this.oImg.style.left=-a+"px";

this.oImg.style.top=-b+"px";

}

</script>

</body>

<html>