jq实现放大镜查看商品大图效果

本文主要是介绍jq实现放大镜查看商品大图效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 <div id="tab"><!--中间区域--><div class="mid-box"><div class="zoom"></div><!--放大镜--></div><!--小图区域--><div class="small-box"><img src="../img/small1.jpg" alt="小图" style="border:1px solid red"/><img src="../img/small2.jpg" alt="小图" /><img src="../img/small3.jpg" alt="小图" /><img src="../img/small4.jpg" alt="小图" /><img src="../img/small5.jpg" alt="小图" /><img src="../img/small6.jpg" alt="小图" /></div><!--大图区域--><div class="big-box"></div>	</div>

* {margin: 0;padding: 0;outline:none;
}
#tab{width:350px;border:1px solid #ff0000;margin:50px;position:relative;
}
.mid-box{width:350px;height:449px;background:url("../img/mid1.jpg");margin-bottom:10px;transition:all 1s;/*图片过渡时间*/-webkit-transition:all 1s;position:relative;
}.zoom{width:120px;/*尽量与大图小图的比例一致*/height:154px;background:rgba(0,0,0,.3);position:absolute;left:-180px;cursor:move;
}
.big-box{width:350px;height:449px;border:1PX solid red;position:absolute;top:0px;left:360px;background:url("../img/big1.jpg") no-repeat 0 0;display:none;
}

/// <reference path="jquery-1.10.2.min.js" />
$(function () {var arrimg = ['url(../img/mid1.jpg)','url(../img/mid2.jpg)','url(../img/mid3.jpg)','url(../img/mid4.jpg)', 'url(../img/mid5.jpg)', 'url(../img/mid6.jpg)'];var arrbigimg = ['url(../img/big1.jpg)','url(../img/big2.jpg)','url(../img/big3.jpg)','url(../img/big4.jpg)', 'url(../img/big5.jpg)', 'url(../img/big6.jpg)'];$(".small-box img").mouseover(function () {var i = $(this).index();$(".mid-box").css('background', arrimg[i]);//点击小图实现中图tab切换$(".big-box").css('background', arrbigimg[i]);//大图切换$(this).css('border', '2px solid #ff0000').siblings().css('border', '2px solid transparent');});$(".mid-box").mousemove(function (e) {var x = e.pageX;var y = e.pageY;//获得鼠标位置 相对于整个文档mbL = $(".mid-box").offset().left;mbT = $(".mid-box").offset().top;//元素相对于文档偏移坐标zoomW = $(".zoom").width();zoomH = $(".zoom").height();var dx = x - mbL - zoomW/2;var dy = y - mbT - zoomH/2;$(".zoom").css({ 'left': dx + 'px', 'top': dy + 'px' });var zooml = parseFloat($(".zoom").css("left"));//获取放大镜左边位置var zoomt = parseFloat($(".zoom").css("top"));if (zooml <= 0) {$(".zoom").css('left', 0);//限制左边界zooml = 0;//镜片移到左边界时} else if (zooml >= 230) {$(".zoom").css('left', '230px');//限制右边界    zooml = 230;}if (zoomt <= 0) {$(".zoom").css('top', 0);//限制上边界zoomt = 0;//镜片移到上边界时} else if (zoomt >= 295) {$(".zoom").css('top', '295px');//限制下边界zoomt = 295;}//准确获取大图比例var posX = -zooml * (350 / 120) + 'px';var posY = -zoomt * (449 / 154) + 'px';var bigscale=(350/120*100)+'%';$(".big-box").css({'display': 'block', 'backgroundPositionX': posX,'backgroundPositionY': posY, 'background-size': bigscale});});$(".mid-box").mouseleave(function () {$(".zoom").css('left', '-180px');//鼠标移开 放大镜消失$(".big-box").css('display','none');});
});

总结：小图到中图的切换可以看做tab切换效果，在这其中我用到的是数组存放中图和大图，随着小图index值的改变从而改变数组下标，达到切换的效果；

放大镜代码:

var dx = x - mbL - zoomW/2;    var dy = y - mbT - zoomH/2;

这样可以保证鼠标始终在放大镜中央，然后需要关注的是放大镜的边界问题；

为准确获得放大的比例：

var posX = -zooml * (350 / 120) + 'px';
var posY = -zoomt * (449 / 154) + 'px';

当然也可以在big-box直接使用background-size：350/120*100%

这篇关于jq实现放大镜查看商品大图效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---