html:
由于样式简单,所以将css样式内嵌于html
<title>放大镜</title>
<style type="text/css">
.small{
width:350px;
height:350px;
border:1px solid #999;
float:left;
position:relative;
}
.small .move{
border:1px solid #999;
background:rgba(255,225,0,0.4);
position:absolute;
box-sizing:border-box;
display:none;
}
.big{
width:550px;
height:550px;
border:1px solid #999;
margin-left:8px;
float:left;
display:none;
}
</style>
</head>
<body>
<div class="small">
<div class="move"></div>
</div>
<div class="big"></div>
<script type="text/javascript" src = "./javascript/放大镜.js"></script>
js:
var config = {
smallBg : "http://img13.360buyimg.com/n1/jfs/t1/59964/8/5482/52239/5d397d35E56518ee9/8b7179acd6e4095f.jpg",
bigBg : "http://img13.360buyimg.com//n0/jfs/t1/59964/8/5482/52239/5d397d35E56518ee9/8b7179acd6e4095f.jpg",
smallDiv : document.querySelector(".small"),
bigDiv : document.querySelector(".big"),
moveDiv : document.querySelector(".move"),
smallImgSize : {
width : 350,
height : 350
},
bigImgSize : {
width : 550,
height : 550
},
bigDivSize : {
width : 900,
height : 900
}
};
config.moveDivSize = {
width : config.bigImgSize.width/config.bigDivSize.width*config.smallImgSize.width,
height : config.bigImgSize.height/config.bigDivSize.height*config.smallImgSize.height
};
(function(){
initDivBg(); //初始化小div背景
initMouse(); //初始化鼠标移动事件
initMoveDiv();
function initMoveDiv(){
config.moveDiv.style.width = config.moveDivSize.width + "px";
config.moveDiv.style.height = config.moveDivSize.height + "px"
}
//计算可移动的div坐标
function initDivBg(){
config.smallDiv.style.background = `url("${config.smallBg}") no-repeat left top/100% 100%`;
config.bigDiv.style.background = `url("${config.bigBg}")`
};
function initMouse(){
config.smallDiv.onmouseenter = function(){
config.moveDiv.style.display = "block";
config.bigDiv.style.display = "block";
};
config.smallDiv.onmouseleave = function(){
config.moveDiv.style.display = "none";
config.bigDiv.style.display = "none";
};
config.smallDiv.onmousemove = function(e){
var move = getOffset(e);
setOpsition(move);
bgPosition();
}
function getOffset(e){
if(e.target === config.smallDiv){
return {
x : e.offsetX,
y : e.offsetY
}
}else{
var style = getComputedStyle(config.moveDiv);
var left = parseFloat(style.left);
var top = parseFloat(style.top);
return {
x : e.offsetX + left + 1,
y : e.offsetY + top + 1
}
}
};
function setOpsition(move){
var left = move.x - config.moveDivSize.width/2;
var top = move.y - config.moveDivSize.height/2;
if(left < 0){
left = 0;
}if( top < 0){
top = 0;
}if(left > config.smallImgSize.width - config.moveDivSize.width){
left = config.bigImgSize.left - config.smallImgSize.left;
}if(top > config.smallImgSize.height - config.moveDivSize.height){
top = config.bigImgSize.top - config.smallImgSize.top;
}
config.moveDiv.style.left = left + "px";
config.moveDiv.style.top = top + "px";
};
function bgPosition(){
var style = getComputedStyle(config.moveDiv);
var left = parseFloat(style.left);
var top = parseFloat(style.top);
var bgleft = left/config.smallImgSize.width*config.bigImgSize.width;
var bgtop = top/config.smallImgSize.height*config.bigImgSize.height;
config.bigDiv.style.backgroundPosition = `-${bgleft}px -${bgtop}px`;
};
}
}());
用面向对象的思想编写程序。(该程序中所用到的大图小图均来源于京东官网)
运行:
想要对下面图片作放大显示
(由于截屏隐藏了鼠标箭头,所以手动画了白色箭头上去,方便观察)鼠标箭头始终处于黄色透明框中间位置,随着鼠标移动,黄色透明框也随之移动。右边的大方框也随着左边黄色方框显示对应图片位置的放大效果。这样就实现了放大镜效果了。