jquery 플러그인 jquery.LightBox.js는 그림을 클릭하여 확대하고 왼쪽 및 오른쪽을 클릭하는 효과를 구현합니다(데모 소스 코드 다운로드 포함)

jquery 플러그인 jquery.LightBox.js는 그림을 클릭하여 확대하고 왼쪽 및 오른쪽을 클릭하는 효과를 구현합니다(데모 소스 코드 다운로드 포함)_jquery

WBOY

풀어 주다： 2016-05-16 15:13:45

원래의

1673명이 탐색했습니다.

이 기사의 예에서는 클릭하여 그림을 확대하고 왼쪽과 오른쪽을 클릭하여 전환하는 효과를 얻기 위한 jquery 플러그인 jquery.LightBox.js에 대해 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

이 플러그인은 작성자의 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.