图片放大镜效果

来源：互联网发布：javascript例子编辑：程序博客网时间：2024/05/17 01:50

这是基于jQuery实现的图片放大镜展示效果（如下图）：

HTML代码如下：

<div class="content"><div class="img1"><span class="select_box"></span><img src="../TB1DQiLPXXXXXbeXXXXXXXXXXXX_!!0-item_pic.jpg_430x430q90.jpg" alt=""></div><div class="img2"><img src="../TB1DQiLPXXXXXbeXXXXXXXXXXXX_!!0-item_pic.jpg" alt=""></div></div>

CSS代码如下：

div,body{margin: 0;padding: 0;}.content{overflow: hidden;}.img1,.img2{width: 420px;height: 420px;position: relative;float: left;margin-left: 40px;overflow: hidden;}.img1 img{width: 100%;height: 100%;}.img2 img{position: absolute;width: 840px;height: 840px;}.select_box{position: absolute;display: block;width: 210px;height: 210px;background: url('../T12pdtXaldXXXXXXXX-2-2.png') repeat 0 0;}

js代码如下：

//适用于原图展示框与放大展示框一样大小 且原图展示框与抓取框的比例等于放大展示图与展示框的比例(注意：宽高各成比例)(function($){$.fn.extend({'checkImg' : function(){var $this = $(this);//原图展示框var $select_box = $('.select_box');//原图抓取框var $img = $('.img2 img');//放大展示图var $img_box = $('.img2');//放大展示框var x1 = $this.offset().left;var y1 = $this.offset().top;var w1 = $this.width();var h1 = $this.height();var w2 = $select_box.width();var h2 = $select_box.height();var w3 = $img.width();var h3 = $img.height();var w4 = $img_box.width()var h4 = $img_box.height();$(this).mousemove(function(e){var x2 = e.pageX-w2/2;var y2 = e.pageY-h2/2;var left =(x2 <= x1 ? 0 : (x2 >= (w1 - w2 + x1) ? (w1 - w2) :  x2 - x1));var top = (y2 <= y1 ? 0 : (y2 >= (h1 - h2 + y1) ? (h1 - h2) : y2 - y1));$select_box.css({'left':left,'top':top});var radioX = (w3 - w4)/(w1 - w2);var radioY = (h3 - h4)/(h1 - h2);$img.css({'left':-left*radioX,'top':-top*radioY})})}})})(jQuery);var $img1 = $('.img1');$img1.checkImg()

以下是所用到的图片（天猫上下载的）

阅读全文

0 0