图片放大镜效果
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片放大镜-柯乐义</title> 6 </head> 7 <body> 8 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 9 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/18/jquery.enlarge.js"></script> 10 <script type="text/javascript"> 11 //柯乐义 http://keleyi.com 12 $(function () { 13 $("#demo").enlarge( 14 { 15 // 鼠标遮罩层样式 16 shadecolor: "#FFD24D", 17 shadeborder: "#FF8000", 18 shadeopacity: 0.4, 19 cursor: "move", 20 21 // 大图外层样式 22 layerwidth: 480, 23 layerheight: 360, 24 layerborder: "#DDD", 25 fade: true, 26 27 // 大图尺寸 28 largewidth: 960, 29 largeheight: 720 30 }); 31 }); 32 33 </script> 34 <div style="width: 986px; margin: 0px auto;"> 35 <div><h3>图片放大镜</h3>把光标移动到下面图片上 <a href="http://keleyi.com/a/bjad/q2ee2xyt.htm" target="_blank">原文</a></div> 36 <a href="http://keleyi.com/image/a/5nxma18i.jpg" id="demo" style="position: relative; float: left;"> 37 <img src="http://keleyi.com/image/a/qsqtberv.jpg" width="240" height="180" alt="小图"> 38 <img src="http://keleyi.com/image/a/5nxma18i.jpg" width="960" height="720" style="display: none;" alt="大图"> 39 </a> 40 </div> 41 </body> 42 </html>
/*
Enlarge for jQuery v1.1
2013
http://keleyi.com/
*/
(function ($) {
// 默认参数
var defaults =
{
// 鼠标遮罩层样式
shadecolor: "#FFD24D",
shadeborder: "#FF8000",
shadeopacity: 0.5,
cursor: "move",
// 大图外层样式
layerwidth: 400,
layerheight: 300,
layerborder: "#DDD",
fade: true,
// 大图尺寸
largewidth: 1280,
largeheight: 960
}
// 插件入口
var enlarge = function (option) {
// 合并参数
option = $.extend({}, defaults, option);
// 循环处理
$(this).each(function () {
var self = $(this).css("position", "relative");
var img = self.children().first();
// 计算大小图之间的比例
var ratio =
{
x: img.width() / option.largewidth,
y: img.height() / option.largeheight
}
// 定义一些尺寸
var size =
{
// 计算鼠标遮罩层的大小
shade:
{
width: option.layerwidth * ratio.x - 2,
height: option.layerheight * ratio.y - 2
}
}
// 创建鼠标遮罩层
var shade = $("<div>").css(
{
"position": "absolute",
"left": "0px",
"top": "0px",
"background-color": option.shadecolor,
"border": "1px solid " + option.shadeborder,
"width": size.shade.width,
"height": size.shade.height,
"opacity": option.shadeopacity,
"cursor": option.cursor
});
shade.hide().appendTo(self);
// 创建大图和放大图层
var large = $("<img>").css(
{
"position": "absolute",
"display": "block",
"width": option.largewidth,
"height": option.largeheight
});
var layer = $("<div>").css(
{
"position": "absolute",
"left": self.width() + 5,
"top": 0,
"background-color": "#111",
"overflow": "hidden",
"width": option.layerwidth,
"height": option.layerheight,
"border": "1px solid " + option.layerborder
});
large.attr("src", self.attr("href"));
large.appendTo(layer);
layer.hide().appendTo(self);
// 不可移动的半径范围
var half =
{
x: size.shade.width / 2,
y: size.shade.height / 2
}
// 有效范围
var area =
{
width: self.innerWidth() - shade.outerWidth(),
height: self.innerHeight() - shade.outerHeight()
}
// 对象坐标
var offset = self.offset();
// 显示效果
var show = function () {
offset = self.offset();
shade.show();
if (option.fade) layer.stop().fadeIn(300);
else layer.show();
}
// 隐藏效果
var hide = function () {
shade.hide();
layer.hide();
}
// 绑定鼠标事件
self.mousemove(function (e) {
// 鼠标位置
var x = e.pageX - offset.left;
var y = e.pageY - offset.top;
// 不在图像中则直接隐藏
if (x < 0 || x > self.innerWidth()) return hide();
if (y < 0 || y > self.innerHeight()) return hide();
// 判断是否在有效范围内
x = x - half.x;
y = y - half.y;
if (x < 0) x = 0;
if (y < 0) y = 0;
if (x > area.width) x = area.width;
if (y > area.height) y = area.height;
// 遮罩层跟随鼠标
shade.css(
{
left: x,
top: y
});
// 大图移动到相应位置
large.css(
{
left: (0 - x / ratio.x),
top: (0 - y / ratio.y)
});
})
.mouseenter(show)
.mouseleave(hide);
});
}
// 扩展插件
$.fn.extend(
{
enlarge: enlarge
});
})(jQuery)
ruby前端观察
