jQuery和CSS3超逼真的图片放大镜特效
2015-11-03 10:34
671 查看
这是一款效果非常逼真的jQuery和CSS3超逼真的图片放大镜特效。该图片放大镜特效使用CSS3的
HTML结构
这个图片放大镜特效的HTML结构非常简单,使用一个class 为
CSS样式
CSS样式主要是设置放大镜的外观样式,使用
JAVASCRIPT
该图片放大镜特效在插件初始化的时候,会先计算缩略图的原始尺寸,在获取缩略图的原始尺寸之后,才开始放大图片。
在获取缩略图的尺寸的时候,插件会创建一个和
在获取缩略图的正确尺寸之后,然后获取鼠标在缩略图上的偏移位置
演示地址http://www.htmleaf.com/Demo/201503171534.html
box-shadow和
border-radius实现来制作放大镜的样式,使用jQuery来获取当前鼠标的坐标系,并修改当前坐标系的背景图像。
HTML结构
这个图片放大镜特效的HTML结构非常简单,使用一个class 为
magnify的
div作为wrapper,里面缩略图直接使用
<img>来制作,原图使用一个class为
large的
div制作。
<div class="magnify"> <!-- This is the magnifying glass which will contain the original/large version --> <div class="large"></div> <!-- This is the small image --> <img class="small" src="img/iphone.jpg" width="200"/> </div>
CSS样式
CSS样式主要是设置放大镜的外观样式,使用
box-shadow和
border-radius来实现。为制作放大镜的圆形边框,使用了多重阴影技术。
.large { width: 175px; height: 175px; position: absolute; border-radius: 100%; /*Multiple box shadows to achieve the glass effect*/ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); /*Lets load up the large image first*/ background: url('img/iphone.jpg') no-repeat; /*hide the glass by default*/ display: none; }
JAVASCRIPT
该图片放大镜特效在插件初始化的时候,会先计算缩略图的原始尺寸,在获取缩略图的原始尺寸之后,才开始放大图片。
在获取缩略图的尺寸的时候,插件会创建一个和
.small属性一样的
Image对象。我们不能直接获取
.small的尺寸大小,因为它的
width属性设置为200像素,我们不知道它的高度,为了获取它的实际尺寸,只有新建一个
Image对象。
if(!native_width && !native_height) { //This will create a new image object with the same image as that in .small //We cannot directly get the dimensions from .small because of the //width specified to 200px in the html. To get the actual dimensions we have //created this image object. var image_object = new Image(); image_object.src = $(".small").attr("src"); //This code is wrapped in the .load function which is important. //width and height of the object would return 0 if accessed before //the image gets loaded. native_width = image_object.width; native_height = image_object.height; }
在获取缩略图的正确尺寸之后,然后获取鼠标在缩略图上的偏移位置
mx和
my。当鼠标在图片内时,
.large被设置为可见状态,然后通过一个小公式来获取鼠标在缩略图上的坐标对应的在大图上的坐标。最后使用
css()方法来修改放大镜的坐标和背景位置。
else { //x/y coordinates of the mouse //This is the position of .magnify with respect to the document. var magnify_offset = $(this).offset(); //We will deduct the positions of .magnify from the mouse positions with //respect to the document to get the mouse positions with respect to the //container(.magnify) var mx = e.pageX - magnify_offset.left; var my = e.pageY - magnify_offset.top; //Finally the code to fade out the glass if the mouse is outside the container if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) { $(".large").fadeIn(100); } else { $(".large").fadeOut(100); } if($(".large").is(":visible")) { //The background position of .large will be changed according to the position //of the mouse over the .small image. So we will get the ratio of the pixel //under the mouse pointer with respect to the image and use that to position the //large image inside the magnifying glass var rx = Math.round(mx/$(".small").width()*native_width - $(".large").width()/2)*-1; var ry = Math.round(my/$(".small").height()*native_height - $(".large").height()/2)*-1; var bgp = rx + "px " + ry + "px"; //Time to move the magnifying glass with the mouse var px = mx - $(".large").width()/2; var py = my - $(".large").height()/2; //Now the glass moves with the mouse //The logic is to deduct half of the glass's width and height from the //mouse coordinates to place it with its center at the mouse coordinates //If you hover on the image now, you should see the magnifying glass in action $(".large").css({left: px, top: py, backgroundPosition: bgp}); } }
演示地址http://www.htmleaf.com/Demo/201503171534.html
相关文章推荐
- jquery操作DOM 元素(2)
- Jquery实现图片轮播源码
- jquery 上传空间uploadify使用笔记
- jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
- jQuery的deferred对象实现callback
- jquery validate 验证插件remote使用注意的地方
- 夺命雷公狗jquery---59Ajax中的跨域请求
- asp.net mvc jquery+js+ajax 实现联动
- 前端开发者都应知道的 jQuery 小技巧
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
- jquery内置函数
- 基于HTML5 Ajax文件上传进度条如何实现(jquery版本)
- 前端开发者都应知道的 jQuery 小技巧
- jQuery基本过滤选择器
- jQuery实用技巧必备(中)
- jQuery 层次选择器
- jQuery选择器,用逗号分隔的时候需要注意范围问题
- jQuery的学习笔记4
- jQuery实用技巧必备(中)
- jQuery实现仿QQ头像闪烁效果的文字闪动提示代码