簡單的放大鏡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>放大鏡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.content {
margin: 20px auto;
width: 600px;
}
.leftbox {
position: relative;
float: left;
width: 300px;
height: 300px;
border: 1px solid skyblue;
box-sizing: border-box;
background: url('http://avatar.csdn.net/6/E/4/1_m781101.jpg') no-repeat;
background-size: cover;
}
.mark {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: sandybrown;
opacity: 0.6;
display: none;
}
.rightbig {
position: relative;
overflow: hidden;
float: left;
width: 300px;
height: 300px;
border: 1px solid lightsalmon;
box-sizing: border-box;
display: none;
}
.rightbig img {
position: absolute;
left: 0;
top: 0;
width: 900px;
height: 900px;
}
</style>
</head>
<body>
<div class="content">
<div class="leftbox">
<div class="mark">
</div>
</div>
<div class="rightbig">
<img src="http://avatar.csdn.net/6/E/4/1_m781101.jpg" />
</div>
</div>
</body>
</html>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $leftBxo = $('.leftbox')
var $mark = $('.mark')
var $rightbig = $('.rightbig')
$leftBxo.mouseenter(function() {
$mark.show();
$rightbig.show()
}).mousemove(function(e) {
//首先應該讓mark和鼠標走,那就要先確定mark的left和top
var markX = e.clientX - $leftBxo.offset().left - 50; //減50是爲了讓鼠標在mark中間顯示
var markY = e.clientY - $leftBxo.offset().top - 50;
//限定邊界，當鼠標移開的時候，mark不跟着跑出來
var minL = 0,
maxL = $leftBxo.innerWidth() - $mark.innerWidth(),
minT = 0,
maxT = $leftBxo.innerHeight() - $mark.innerHeight()
markX = markX <= minL ? minL : (markX >= maxL ? maxL : markX)
markY = markY <= minT ? minT : (markY >= maxT ? maxT : markY)
$mark.css({
'left': markX,
'top': markY
})
//讓顯示大圖的容器中的圖片根據mark的left和top進行定位
$rightbig.find('img').css({
'left': -markX * 3, //要注意這裏是負值
'top': -markY * 3
})
}).mouseleave(function() {
$mark.hide()
$rightbig.hide()
})
</script>爲了操作樣式方便就用jquery了，用js也挺簡單的