图片/图形

jQuery+CSS3超逼真图片放大镜特效

阿里云


这是一款效果非常逼真的 jQuery 和 CSS3 超逼真的图片放大镜特效。该图片放大镜特效使用 CSS3 的 box-shadow 和 border-radius 实现来制作放大镜的样式,使用 jQuery 来获取当前鼠标的坐标系,并修改当前坐标系的背景图像。

HTML 结构

这个图片放大镜特效的 HTML 结构非常简单,使用一个 class 为 magnify 的 div 作为 wrapper,里面缩略图直接使用<img>来制作,原图使用一个 class 为 large 的 div 制作。

也想出现在这里?联系我们
创客主机
  1. <div class="magnify">
  2.   <!-- This is the magnifying glass which will contain the original/large version -->
  3.   <div class="large"></div>
  4.   <!-- This is the small image -->
  5.   <img class="small" src="img/iphone.jpg" width="200"/>
  6. </div>

CSS 样式

CSS 样式主要是设置放大镜的外观样式,使用 box-shadow 和 border-radius 来实现。为制作放大镜的圆形边框,使用了多重阴影技术。

  1. /*Lets create the magnifying glass*/
  2. .large {
  3.   width: 175px; height: 175px;
  4.   position: absolute;
  5.   border-radius: 100%;
  6.  
  7.   /*Multiple box shadows to achieve the glass effect*/
  8.   box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 
  9.   0 0 7px 7px rgba(0, 0, 0, 0.25), 
  10.   inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  11.  
  12.   /*Lets load up the large image first*/
  13.   background: url('img/iphone.jpg') no-repeat;
  14.  
  15.   /*hide the glass by default*/
  16.   display: none;
  17. }

JAVASCRIPT

该图片放大镜特效在插件初始化的时候,会先计算缩略图的原始尺寸,在获取缩略图的原始尺寸之后,才开始放大图片。在获取缩略图的尺寸的时候,插件会创建一个和.small 属性一样的 Image 对象。我们不能直接获取.small 的尺寸大小,因为它的 width 属性设置为 200 像素,我们不知道它的高度,为了获取它的实际尺寸,只有新建一个 Image 对象。

  1. if(!native_width && !native_height)
  2. {
  3.   //This will create a new image object with the same image as that in .small
  4.   //We cannot directly get the dimensions from .small because of the 
  5.   //width specified to 200px in the html. To get the actual dimensions we have
  6.   //created this image object.
  7.   var image_object = new Image();
  8.   image_object.src = $(".small").attr("src");
  9.  
  10.   //This code is wrapped in the .load function which is important.
  11.   //width and height of the object would return 0 if accessed before 
  12.   //the image gets loaded.
  13.   native_width = image_object.width;
  14.   native_height = image_object.height;
  15. }

在获取缩略图的正确尺寸之后,然后获取鼠标在缩略图上的偏移位置 mx 和 my。当鼠标在图片内时,.large 被设置为可见状态,然后通过一个小公式来获取鼠标在缩略图上的坐标对应的在大图上的坐标。最后使用 css()方法来修改放大镜的坐标和背景位置。

  1. else
  2. {
  3.   //x/y coordinates of the mouse
  4.   //This is the position of .magnify with respect to the document.
  5.   var magnify_offset = $(this).offset();
  6.   //We will deduct the positions of .magnify from the mouse positions with
  7.   //respect to the document to get the mouse positions with respect to the 
  8.   //container(.magnify)
  9.   var mx = e.pageX - magnify_offset.left;
  10.   var my = e.pageY - magnify_offset.top;
  11.  
  12.   //Finally the code to fade out the glass if the mouse is outside the container
  13.   if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
  14.   {
  15.     $(".large").fadeIn(100);
  16.   }
  17.   else
  18.   {
  19.     $(".large").fadeOut(100);
  20.   }
  21.   if($(".large").is(":visible"))
  22.   {
  23.     //The background position of .large will be changed according to the position
  24.     //of the mouse over the .small image. So we will get the ratio of the pixel
  25.     //under the mouse pointer with respect to the image and use that to position the 
  26.     //large image inside the magnifying glass
  27.     var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1;
  28.     var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1;
  29.     var bgp = rx + "px " + ry + "px";
  30.  
  31.     //Time to move the magnifying glass with the mouse
  32.     var px = mx - $(".large").width()/2;
  33.     var py = my - $(".large").height()/2;
  34.     //Now the glass moves with the mouse
  35.     //The logic is to deduct half of the glass's width and height from the 
  36.     //mouse coordinates to place it with its center at the mouse coordinates
  37.  
  38.     //If you hover on the image now, you should see the magnifying glass in action
  39.     $(".large").css({left: px, top: py, backgroundPosition: bgp});
  40.   }
  41. }

jQuery+CSS3 超逼真图片放大镜特效

已有 468 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(1)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!