jquery实现淘宝商品图片局部放大

jquery实现淘宝商品图片局部放大

本篇博文用于简单记录图片放大功能实现,供大家参考,具体内容如下

功能实现还存在一些小漏洞在文章结尾提出,希望各位指正

1、图片放大初考虑将图片转换为字体图片形式,然后进行放大处理,但最终本人技术不过关无法实现,后用width: 200%;进行一般的图片放大,所以当图片越大就存在一些失真;

2、图片放大后的显示为本次实现的关键,通过获取鼠标指针的位置从而获取指针在图片的那一个位置,再以当前位置进行图片放大,放大后将图片进行偏移,偏移量以鼠标指针在原图的位置上获取的left和top值乘以放大倍数就可以显示局部放大的功能了

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8">         <title></title>         <script type="text/javascript" src="../js/jquery-1.10.2.js" ></script>         <style>             *{margin: 0;padding: 0;}             .div1{                 width: 450px;                 height: 300px;                 overflow: hidden;                 display: inline-block;             }             .div1>img{width: 100%;}             .div2{                 width: 450px;                 height: 300px;                 border: 1px solid #A9A9A9;                 overflow: hidden;                 display: inline-block;                 position: relative;             }             .div2>img{                 position: absolute;                 width: 200%;                 height: 200%;             }             .list1{                 width: 70px;                 height: 50px;                 float: left;                 margin-left: 10px;             }             .list1>img{width: 100%;}             #zhezhao{                 width: 100px;                 height: 100px;                 background: #BC8F8F;                 opacity: 0.7;                 display: none;                 position: absolute;             }         </style>     </head>     <body>         <div class="div1">             <img src="../img/wall1.webp" alt="" class="img1" />             <div id="zhezhao"></div>         </div>         <div class="div2"></div>         <div class="list">             <div class="list1">                 <img src="../img/wall2.webp" alt="" class="listimg1" />             </div>                 <div class="list1">                 <img src="../img/wall3.webp" alt="" class="listimg2" />             </div>                 <div class="list1">                 <img src="../img/wall4.webp" alt="" class="listimg3" />             </div>                 <div class="list1">                 <img src="../img/wall6.webp" alt="" class="listimg4" />             </div>                 <div class="list1">                 <img src="../img/wall5.webp" alt="" class="listimg5" />             </div>         </div>         <script>             $(function(){                 $('.list1').mouseover(function(){                     $('.div1').children()[0].src = $(this).children()[0].src;                 });                 $('.div1').mousemove(function(e){                                         $('#zhezhao').css({                         left: e.clientX-50+'px',                         top: e.clientY-50+'px',                         display: 'block'                     });                     var $img = $('.div1').children().eq(0);                     $('.div2').empty();                     $('.div2').append($img.clone());                     $('.img1').css({                             left: -(e.clientX-50)*2+'px',                             top: -(e.clientY-50)*2+'px'                         });                     if(50>e.clientX||e.clientX>450||50>e.clientY||e.clientY>300) {                         $('#zhezhao').css({                             display: 'none'                         });                     }else{ //(400<e.clientX&&e.clientX<450||250<e.clientY&&e.clientY<300)                          $('#zhezhao').css({                             left: e.clientX-50+'px',                             top: e.clientY-50+'px',                             display: 'block'                         });                     }                 });             });         </script>     </body> </html>

本功能在具体操作上还存在一些问题,当鼠标快速移开原图区域时,无法有效的监听到鼠标移出区域的事件,在考虑使用移出事件时,鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件,无法很好的解决,希望各位帮忙移出事件。

推荐阅读