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.jpg" alt="" class="img1" /> <div id="zhezhao"></div> </div> <div class="div2"></div> <div class="list"> <div class="list1"> <img src="../img/wall2.jpg" alt="" class="listimg1" /> </div> <div class="list1"> <img src="../img/wall3.jpg" alt="" class="listimg2" /> </div> <div class="list1"> <img src="../img/wall4.jpg" alt="" class="listimg3" /> </div> <div class="list1"> <img src="../img/wall6.jpg" alt="" class="listimg4" /> </div> <div class="list1"> <img src="../img/wall5.jpg" 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>
本功能在具体操作上还存在一些问题,当鼠标快速移开原图区域时,无法有效的监听到鼠标移出区域的事件,在考虑使用移出事件时,鼠标悬浮于原图上的遮罩层影响力鼠标在原图上的移出事件,无法很好的解决,希望各位帮忙移出事件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。