<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%