jquery实现图片放大镜功能
实现原理：
这里用到了两张图片，一张小图，一张大图。将大图设置为放大镜的背景图片，当鼠标在小图上移动时，同时控制背景大图在放大镜中的位置。两张图片大小最好是等比例的，这样才能达到最佳效果。当没有大图时，则默认为小图本身，这时由于两张图片大小一样，因此放大镜效果不明显，就跟没放大是一样的。
此插件用到了html5，css3的一些属性，ie8及以下版本不兼容，放大镜是方形的。
运行效果截图如下：
具体代码如下：
(function () { $.fn.Magnifier = function (options) { //默认参数设置 var settings = { diameter: 150, //放大镜的直径大小 borderWidth: 2, //放大镜边框大小 borderColor: "white", //放大镜边框颜色 backgroundImg: "../img/111.jpg" //放大镜内的图片（即大图） }; //合并参数 if (options) $.extend(settings, options); //链式原则 return this.each(function () { //存储当前对象 var root = $(this); //当前对象宽高 var WRoot = root.width(); var HRoot = root.height(); //偏移量 left 和 top var offset = root.offset(); //放大镜样式 var style = "background-position: 0px 0px;background-repeat: no-repeat;float: left;"; style += "position: absolute;box-shadow:0 0 5px #777, 0 0 10px #aaa inset;display: none;"; style += "width: " + String(settings.diameter) + "px;height: " + String(settings.diameter) + "px;"; style += "border-radius: " + String(settings.diameter / 2 + settings.borderWidth) + "px;"; style += "border: " + String(settings.borderWidth) + "px solid " + settings.borderColor + ";"; //创建放大镜 var magnifier = $("<div></div>").appendTo(root.parent()); //图片（当没有大图时，为小图本身） var backgroundImg = settings.backgroundImg ? settings.backgroundImg : root.attr("src"); //将图片放入放大镜内 magnifier.css({ backgroundImage: "url('" + backgroundImg + "')" }); //缩放比例 var WRatio = 0; //宽度 var HRatio = 0; //高度 //图片加载完，计算缩放比例 //由于图片原本不在DOM文档里，因此页面加载时不会触发load事件，因此要通过执行appendTo来触发load事件 $("<img src='" + backgroundImg + "' />").load(function () { WRatio = $(this).width() / WRoot; HRatio = $(this).height() / HRoot; }).appendTo(root.parent()); //放大镜及其背景图片位置控制 function Position(e) { var LPos = parseInt(e.pageX - offset.left); var TPos = parseInt(e.pageY - offset.top); //判断鼠标是否在图片上 if (LPos < 0 || TPos < 0 || LPos > WRoot || TPos > HRoot) { magnifier.hide(); //不在隐藏放大镜 } else { magnifier.show(); //反之显示放大镜 //控制放大镜内背景图片的位置 （settings.diameter / 2）半径 LPos = String(((e.pageX - offset.left) * WRatio - settings.diameter / 2) * (-1)); TPos = String(((e.pageY - offset.top) * HRatio - settings.diameter / 2) * (-1)); magnifier.css({ backgroundPosition: LPos + 'px ' + TPos + 'px' }); //控制放大镜本身位置 LPos = String(e.pageX - settings.diameter / 2); TPos = String(e.pageY - settings.diameter / 2); magnifier.css({ left: LPos + 'px', top: TPos + 'px' }); } } //放大镜 magnifier.mousemove(Position); //当前对象 root.mousemove(Position); }); }; })();
实例DEMO如下：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS3+jQuery图像放大镜效果</title> <style type="text/css"> body { background-color: Black; } .box { width: 700px; margin: 50px auto; } </style> </head> <body> <div> <!--小图--> <img alt="" src="../img/222.gif" /> </div> <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="../Scripts/jquery.similar.magnifier.js" type="text/javascript"></script> <script type="text/javascript"> $("#img_02").Magnifier(); </script> </body> </html>
关于jquery实现图片放大镜功能的内容就介绍到这里，希望大家仔细研究，学以致用。
推荐文章
本页内容版权归属为原作者，如有侵犯您的权益，请通知我们删除。
jquery实现加载进度条提示效果 - 2015-11-24 14:11:05
本文实例讲述了jquery实现加载进度条提示效果代码。分享给大家供大家参考。具体如下： 运行效果截图如下： 具体代码如下： !DOCTYPE htmlhtml head meta charset="utf-8" title进度条/title script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.1/jquery.min.js"/script /head body div /div /b
nodejs初步体验篇 - 2015-11-24 14:11:04
前言：写这篇文章的由来： 1.前段时间单位有新项目启动，服务端要做的工作不多也不算麻烦，就是处理一些中间层的服务，而且我们团队里面个个都会JavaScript，领导就决定试试服务器端的JavaScript，结果本人有幸被派去研究了几天Node，怀着鸡冻的心情开始了node.js的篇章，这篇文章也就是为这几天研究的总结。 2.一个JavaScript工程师如果没听过node.js那么我想你是不是错过了什么，每个优秀的前端工程师都有必要去了解后台处理流程，那么如果又能从JavaScript出发，岂不是一件很美
- 2015-11-23 18:11:33
JavaScript开发经典技巧分享给大家： 1、首次为变量赋值时务必使用var关键字 变量没有声明而直接赋值得话，默认会作为一个新的全局变量，要尽量避免使用全局变量。 2、使用===取代== ==和!=操作符会在需要的情况下自动转换数据类型。但===和!==不会，它们会同时比较值和数据类型，这也使得它们要比==和!=快。 [10] === 10 // is false [10] == 10 // is true '10' == 10 // is true '10' === 10 // is false
jquery实现select选择框内容左右移动代码分享 - 2015-11-23 18:11:32
相关文章
精彩导读
热门资讯
关注我们
