recherche

Maison >interface Web >js tutoriel >Le plug-in jquery jquery.LightBox.js réalise l'effet de cliquer pour agrandir l'image et de cliquer à gauche et à droite (avec téléchargement du code source de la démo)_jquery

Le plug-in jquery jquery.LightBox.js réalise l'effet de cliquer pour agrandir l'image et de cliquer à gauche et à droite (avec téléchargement du code source de la démo)_jquery

WBOY
WBOYoriginal
2016-05-16 15:13:451708parcourir

L'exemple de cet article décrit le plug-in jquery jquery.LightBox.js pour obtenir l'effet de cliquer pour agrandir l'image et de cliquer à gauche et à droite pour basculer. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Ce plug-in est écrit par l'auteur de l'article. Le but est d'améliorer les capacités de l'auteur en js et également de fournir une certaine commodité à certains novices en js lorsqu'ils utilisent le plug-in. Les vétérans peuvent simplement voler tranquillement.

Ce plug-in est conçu pour obtenir les effets actuellement populaires consistant à cliquer pour agrandir une image et à cliquer à gauche et à droite pour changer d'image. Vous pouvez définir s'il faut ajouter l'effet de changement d'image à gauche ou à droite en fonction de vos besoins réels. Le code global est le suivant : 

<!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>

Code du plug-in 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);

Cliquez ici pour un exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par davantage de contenu lié à jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets de glisser et des compétences JQuery", "Résumé des compétences de l'extension jQuery" , "Résumé des effets spéciaux classiques communs de JQuery", "Résumé de l'utilisation des animations et des effets spéciaux jQuery" et "Résumé de l'utilisation du sélecteur jquery"

J'espère que cet article sera utile à tous ceux qui programment jQuery.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JS pour modifier dynamiquement la taille du texte des pages Web en temps réel en fonction de la taille du navigateur window_javascript skillsArticle suivant：Méthode JS pour modifier dynamiquement la taille du texte des pages Web en temps réel en fonction de la taille du navigateur window_javascript skills

Articles Liés

Voir plus