商品放大镜效果
这两天写了个商品放大镜的效果并封装了一下，贴出来，欢迎大家指点。现在是调整兼容性之后的版本
如果要看效果，引入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: 300px;height: 240px;margin: 100px auto; position: relative; }
.outBox{width: 300px;height: 200px;position: relative;border: 1px solid #000;}
.posShowBox{width: 300px;height: 200px;position: absolute; top: 0;left: 302px;}
.outBox img{position: absolute;left: 0;top: 0;display: none;}
.outBox img.currentPic{display: block;}
.showBox{width: 300px;height: 200px;float: left;display: none;position: relative;overflow: hidden;border: 1px solid #000;}
.shadow{width: 150px;height: 100px;opacity: .5; overflow: hidden;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;cursor: move;}
.nums{width: 100px;height: 25px;}
.nums li{float: left;width: 25px;height: 25px;line-height: 25px;text-align: center;background: #000;color: #fff;cursor: pointer;}
.nums li.currentPic{background: #d00; }
</style>
</head>
<body>
<div class="box" id="box"> <!--总父元素-->
<div class="outBox"> <!--原图的父元素-->
<img class="currentPic" src="../images/m_1365749071447.jpg" relData = "../images/m_1365749071447.jpg" width="300" height=" 200"/>
<img src="../images/m_1365749053538.jpg" relData="../images/m_1365749053538.jpg" width="300" height=" 200" />
<img src="../images/m_1365749068918.jpg" relData="../images/m_1365749068918.jpg" width="300" height=" 200"/>
<img src="../images/m_1365749070159.jpg" relData="../images/m_1365749070159.jpg" width="300" height="200"/>
<div class="ctrlBox"></div> <!--控制层，鼠标在这个层上面滑动-->
<div class="shadow"></div> <!--鼠标下的阴影-->
</div>
<div class="posShowBox">
<div class="showBox"><img src=""/></div> <!--大图的父元素-->
</div>
<ul class="nums">
<li class="currentPic">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="box" id="box1"> <!--总父元素-->
<div class="outBox"> <!--原图的父元素-->
<img class="currentPic" src="../images/m_1365749071447.jpg" relData = "http://imgma.xgo-img.com.cn/15_module_images/551b41d6566da.jpg" width="300" height=" 200"/>
<img src="../images/m_1365749053538.jpg" relData="../images/m_1365749053538.jpg" width="300" height=" 200" />
<img src="../images/m_1365749068918.jpg" relData="../images/m_1365749068918.jpg" width="300" height=" 200"/>
<img src="../images/m_1365749070159.jpg" relData="../images/m_1365749070159.jpg" width="300" height="200"/>
<div class="ctrlBox"></div> <!--控制层，鼠标在这个层上面滑动-->
<div class="shadow"></div> <!--鼠标下的阴影-->
</div>
<div class="posShowBox">
<div class="showBox"><img src=""/></div> <!--大图的父元素-->
</div>
<ul class="nums">
<li class="currentPic">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<script type='text/javascript' src='http://static.xgo-img.com.cn/js/jquery172p.js'></script>
<script type="text/javascript">
(function ($) {
$.fn.enlargeMirror = function (options) {
var defaults = {
times:2,
tabClass: "currentPic"
}
var outBox =this.find(".outBox"),
oBox =this.find(".ctrlBox"),
sBox= this.find(".showBox"),
oGLayer = this.find(".shadow"),
tabLi = this.find(".nums li");
var oImg = this.find("img");
var opts = $.extend(defaults,options);//继承
var oEnLPic = this.find("." + opts.tabClass).attr("relData");
var bigPic = sBox.find("img");
var bImg = null;
var mX = null;
var mY = null;
var oX = oBox.offset().left;
var oY = oBox.offset().top;
var aW = oBox.width();
var aH = oBox.height();
var aSt = null;
sBox.width(aW);
sBox.height(aH);
oGLayer.width(aW/opts.times);
oGLayer.height(aH/opts.times);
var aGW = oGLayer.width();
var aGH = oGLayer.height();
var resizeTimer = null;
bigPic.width(oImg.width()* opts.times);
bigPic.height(oImg.height()* opts.times);
// 事件绑定
//this 指原图的父元素
outBox.hover(function () {
sBox.show();
oGLayer.show()
bImg = sBox.find("img");
oBox.mousemove(function (e) {
bigPic.attr("src",oEnLPic);
aSt = $(window).scrollTop();
mX = e.clientX - aGW/2;
mY = aSt + e.clientY-aGH/2;
if (mX<oX) {
mX = oX;
} else if(mX>oX+aW-aGW){
mX = oX+aW-aGW;
}
if (mY<oY) {
mY = oY;
} else if(mY>oY+aH-aGH){
mY = oY+aH-aGH;
}
oGLayer.css("left",(mX-oX) + "px");
oGLayer.css("top",(mY-oY) + "px");
bImg.css("left",(oX-mX)*opts.times + "px");
bImg.css("top",(oY-mY)*opts.times + "px");
})
},function () {
sBox.hide();
oGLayer.hide();
})
$(window).resize(function() {
if (resizeTimer) clearTimeout(resizeTimer);
resizeTimer = setTimeout(function () {
oX = oBox.offset().left;
oY = oBox.offset().top;
}, 500);
});
var $this = this;
tabLi.click(function () {
$(this).addClass(opts.tabClass).siblings().removeClass(opts.tabClass);
outBox.find("img").eq($(this).index()).addClass(opts.tabClass).siblings().removeClass(opts.tabClass);
//下面三行是更换大图里的图片
oEnLPic = $this.find("." + opts.tabClass).attr("relData");
bigPic.attr("src",oEnLPic);
})
}
$("#box").enlargeMirror();
$("#box1").enlargeMirror({
times:3
});
})(jQuery)
</script>
</body>
</html>
