ホームページ > 記事 > ウェブフロントエンド > jquery は画像拡大鏡 function_jquery を実装します
jquery は画像拡大鏡 function_jquery を実装します
- WBOYオリジナル
- 2016-05-16 15:30:251536ブラウズ
実装原則:
ここでは、小さな写真と大きな写真の 2 枚の写真が使用されています。大きい画像を虫眼鏡の背景画像として設定します。小さい画像の上にマウスを移動すると、虫眼鏡内の背景の大きい画像の位置も制御されます。最良の効果を得るには、2 つの画像のサイズの比率が等しいことが最適です。大きな画像がない場合は、デフォルトで小さな画像自体が表示されます。このとき、2 つの画像は同じサイズであるため、拡大鏡の効果は拡大なしと同様に明らかではありません。
このプラグインは 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 style='" + style + "'></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 style='display:none;' 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);
});
};
})();
デモの例は次のとおりです:
<!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 class="box">
<!--小图-->
<img alt="" id="img_02" src="../img/222.gif" width="700" height="500" />
</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 関数の紹介は以上です。よく勉強して、学んだことを応用してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。