ホームページ > 記事 > ウェブフロントエンド > jquery プラグイン jquery.LightBox.js は、画像をクリックして拡大し、左右をクリックする効果を実現します (デモ ソース コードのダウンロード付き)_jquery
jquery プラグイン jquery.LightBox.js は、画像をクリックして拡大し、左右をクリックする効果を実現します (デモ ソース コードのダウンロード付き)_jquery
- WBOYオリジナル
- 2016-05-16 15:13:451635ブラウズ
この記事の例では、クリックして画像を拡大し、左右をクリックして切り替える効果を実現する jquery プラグイン jquery.LightBox.js について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
このプラグインは記事の作成者によって作成され、その目的は、作成者の JS 能力を向上させることと、ベテランがプラグインを使用する際の利便性を提供することです。
このプラグインは、現在人気のあるクリックで画像を拡大したり、左右をクリックして画像を切り替えたりする効果を実現するように設計されており、実際のニーズに応じて画像を左右に切り替える効果を追加するかどうかを設定できます。全体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.item{margin:20px;}
.item ul li{float:left;margin-right:20px;}
.item ul li img{width:100px;cursor:pointer;}
.lb_wrap{display:none;}
.lightbox_bg{background:#000;filter:alpha(opacity=70);opacity:.7;position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;}
.lightbox{position:absolute;left:0;top:50%;width:100%;z-index:2;text-align:center;}
.lightbox p{position:absolute;height:61px;width:38px;top:50%;left:0;z-index:2;background:transparent url(themes.png) no-repeat left top;margin-top:-30.5px;cursor:pointer;}
.lightbox p.next{left:auto;background-position:right top;right:0;}
</style>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery.LightBox.js"></script>
</head>
<body>
<div class="item">
<ul>
<li><img src="01.jpg" /></li>
<li><img src="02.jpg" /></li>
<li><img src="03.jpg" /></li>
<li><img src="04.jpg" /></li>
<li><img src="05.jpg" /></li>
<li><img src="06.jpg" /></li>
</ul>
</div>
<script>
$(function(){
$(".item").LightBox({
controls : true //上一张、下一张按钮是否显示，默认是显示true
});
})
</script>
</body>
</html>
プラグイン jquery.LightBox.js コード:
/*
*LightBox 1.0
*dependence jquery-1.7.1.js
*/
;(function(a){
a.fn.LightBox = function(options){
var defaults = {
controls : true //上一张、下一张按钮是否显示，默认是显示true
}
var opts = a.extend(defaults, options);
var lb_wrap = '<div class="lb_wrap"><div class="lightbox_bg"></div><div class="lightbox"><img src="loading.gif" class="lg_img"></div></div>';
a("body").append(lb_wrap);
//controls
if(opts.controls){
a(".lightbox").append('<p class="prev"></p><p class="next"></p>');
}
function imgobj(obj1, obj2){
//imgObj.height是通过img对象获取的图片的实际高度
var imgObj = new Image();
imgObj.src = obj1.attr("src");
var margintop = 0 - (imgObj.height)/2;
obj2.css("margin-top",margintop);
}
this.each(function(){
var obj = a(this);
var numpic = obj.find("li").length;
var num = 0;
//点击赋值并显示
obj.find("img").click(function(){
var src = a(this).attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
a(".lb_wrap").fadeIn();
a(".lg_img").fadeIn();
a(".prev").fadeIn().siblings(".next").fadeIn();
num = a(this).parent().index(); //获取当前图片的父元素的索引并赋给num为后边点击上一张、下一张服务
});
//上一张
a(".prev").click(function(){
if(num == 0){
num = numpic;
}
var src = obj.find("li").eq(num-1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
num--;
});
//下一张
a(".next").click(function(){
if(num == numpic-1){
num = -1;
}
var src = obj.find("li").eq(num+1).find("img").attr("src");
a(".lg_img").attr("src",src);
imgobj(a(".lg_img"), a(".lightbox"));
num++;
});
//点击除了上一张、下一张之外的其他地方隐藏
a(".lb_wrap").click(function(e){
var e = e || window.event;
var elem = e.target || e.srcElement;
while(elem){
if (elem.className && elem.className.indexOf('prev')>-1) {
return;
}
if(elem.className && elem.className.indexOf('next')>-1){
return;
}
elem = elem.parentNode;
}
a(this).find("img").attr("src","loading.gif").hide(); //隐藏后，再将默认的图片赋给lightbox中图片的src
a(this).find(".prev").hide().siblings(".next").hide();
a(this).fadeOut();
});
})
}
})(jQuery);
完全なサンプルコードについては、ここをクリックしてくださいこのサイトからダウンロードしてください。
さらに jQuery 関連のコンテンツに興味のある読者は、このサイトの特別トピック「JQuery ドラッグ効果とスキルの概要」、「jQuery 拡張機能のスキルの概要」をチェックしてください。 、「jQuery共通古典特撮使い方まとめ」、「jQueryアニメーションと特撮使い方まとめ」、「jQueryセレクター使い方まとめ」
この記事が jQuery プログラミングのすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。