首页 > 代码库 > 商品放大镜效果
商品放大镜效果
这两天写了个商品放大镜的效果，贴出来，欢迎大家指点。
如果要看效果，引入jquery并更换图片即可。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html" charset="GBK"/>
<title>放大镜</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style: none;}
.box{width: 660px;height: 220px;margin: 100px auto;}
.outBox{width: 300px;height: 200px;position: relative;border: 1px solid #000;float: left;}
.outBox img{position: absolute;left: 0;top: 0;}
.showBox{width: 300px;height: 200px;float: left;display: none;position: relative;overflow: hidden;border: 1px solid #000;}
.shadow{width: 150px;height: 100px;opacity: .5;filter:alpha(opacity = 50);background: #000000;position: absolute;z-index: 9;display: none;float: none;}
.showBox img{position: absolute;left: 0;top: 0;}
.ctrlBox{width: 300px;height: 200px;position: absolute;left: 0;top: 0;opacity: 0;filter:alpha(opacity = 0);z-index: 20;background:#00CCCC}
</style>
</head>
<body>
<div class="box">
<div class="outBox">
<img src="http://www.mamicode.com/images/m_1365749071447.jpg" width="300" height=" 200"/>
<div class="ctrlBox"></div>
</div>
<div class="showBox"></div>
</div>
<div class="shadow"></div>
<script src="http://www.mamicode.com/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
var bigPic = $("<img src=http://www.mamicode.com/‘images/m_1365749071447.jpg‘ width=‘600‘ height=‘ 400‘/>");
var oImg = $(".outBox img");
var oBox = $(".ctrlBox");
var voBox = $(".outBox");
var sBox = $(".showBox");
var oGLayer = $(".shadow");
var bImg = null;
var mX = null;
var mY = null;
var oX = oBox.offset().left;
var oY = oBox.offset().top;
// console.log(oX + "," + oY);
voBox.hover(function () {
sBox.show().append(bigPic);
bImg = $(".showBox img");
oBox.mousemove(function (e) {
mX = e.clientX - oGLayer.width()/2;
mY = e.clientY-oGLayer.height()/2;
if (mX<oX) {
mX = oX;
} else if(mX>oX+oBox.width()-oGLayer.width()){
mX = oX+oBox.width()-oGLayer.width();
}
if (mY<oY) {
mY = oY;
} else if(mY>oY+oBox.height()-oGLayer.height()){
mY = oY+oBox.height()-oGLayer.height();
}
oGLayer.css("left",(mX) + "px");
oGLayer.css("top",(mY) + "px");
bImg.css("left",(oX-mX)*2 + "px");
bImg.css("top",(oY-mY)*2 + "px");
oGLayer.show();
})
},function () {
sBox.hide();
oGLayer.hide();
})
</script>
</body>
</html>
商品放大镜效果