• 灯箱效果(点击小图 弹出大图集 然后轮播)


      <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
        <meta charset="UTF-8">
        <title>灯箱</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="Houyuqing">
        <link rel="stylesheet" type="text/css" href="../css/yao.css">
    </head>
    <body>
        <div class="bodyBox">
            <div class="imgBox" id="lightbox_1">
                <div class="imgLeft-2">
                    <img src="../images/01.jpg" alt="01.jpg" class="lightbox-pic" data-source="../images/01.jpg">
                </div>
                <div class="imgRight-2">
                    <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
                    <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
                    <img src="../images/02.jpg" alt="02.jpg" class="lightbox-pic" data-source="../images/02.jpg">
                </div>
            </div>
        </div>
        <!--弹出层-->
        <div id="lightbox_mask"></div>
        <div id="lightbox_popup">
            <div class="pic-view">
                <img src="../images/05.jpg" alt="#" class="pic">
            </div>
            <div class="btn-view">
                <a href="#" class="btn btn-prev"></a>
                <a href="#" class="btn btn-next"></a>
                <a href="#" class="btn btn-close">×</a>
            </div>
        //另一种

    <div class="btn-view">-->
               <!--<a href="#" class="btn btn-prev">-->
    <!--<span></span>-->
    <!--</a>-->
    <!--<a href="#" class="btn btn-next">-->
    <!--<span></span>-->
    <!--</a>-->
    <!--</div>
        </div>
    
        <script src="../js/jquery.min.js"></script>
        <script src="../js/lightbox.js"></script>
        <script>
            //        初始化图片弹出框
            $(function () {
                $('#lightbox_1').lightbox({
                    ifChange: true
                });
            });
        </script>
    </body>
    </html>

    yao.css(一种效果)

    .imgLeft-2 {
        width: 742px;
        height: 526px;
        float: left;
        margin-right: 5px;
    }
    
    .imgLeft-2 img {
        width: 742px;
        height: 526px;
    }
    
    .imgRight-2 {
        width: 232px;
        height: 551px;
        float: left;
        overflow: hidden;
    }
    
    .imgRight-2 img {
        width: 232px;
        display: block;
        height: 172px;
    }
    
    .imgRight-2 img:not(:last-child) {
        margin-bottom: 5px;
    }
    yao.css(另一种效果)
    #lightbox_mask {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7);
    }
    
    #lightbox_popup {
        display: none;
        position: fixed;
        z-index: 1000;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    
    #lightbox_popup .pic-view .pic {
        border-radius: 4px;
    }
    
    #lightbox_popup .btn-view .btn {
        position: absolute;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 24px;
        text-decoration: none;
        border-radius: 30px;
        background-color: #000;
        color: #fff;
        padding: 0;
        border: 2px solid #fff;
        display: none !important;
    }
    
    #lightbox_popup:hover {
        cursor: pointer;
    }
    
    #lightbox_popup:hover .btn {
        display: block !important;
    }
    
    #lightbox_popup .btn-view .btn-prev {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    
    #lightbox_popup .btn-view .btn-next {
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
    }
    
    #lightbox_popup .btn-view .btn-prev span {
        width: 6px;
        height: 6px;
        top: 50%;
        left: 40%;
        position: absolute;
        border-right: 3px solid #fff;
        border-top: 3px solid #fff;
        -webkit-transform: translate(0,-50%) rotate(-135deg);
        transform: translate(0,-50%) rotate(-135deg);
    }
    
    #lightbox_popup .btn-view .btn-next span {
        width: 6px;
        height: 6px;
        top: 50%;
        left: 30%;
        position: absolute;
        border-left: 3px solid #fff;
        border-bottom: 3px solid #fff;
        -webkit-transform: translate(0,-50%) rotate(-135deg);
        transform: translate(0,-50%) rotate(-135deg);
    }
    
    
    

    lightbox.js
    ;(function ($, window, document, undefined) {
    
      var Lightbox = function (elem, options) {
        var self = this;
        this.$elem = elem;
        this.$pic_item = this.$elem.find('.lightbox-pic');
        this.$popMask = $('#lightbox_mask');
        this.$popWin = $('#lightbox_popup');
        this.$picView = this.$popWin.find('.pic-view');
        this.$pic = this.$picView.find('.pic');
        this.$btn_prev = this.$popWin.find('.btn-prev');
        this.$btn_next = this.$popWin.find('.btn-next');
        this.$btn_close = this.$popWin.find('.btn-close');
        this.$caption = this.$popWin.find('.caption-view > p');
    
        this.groupName = null;
        this.groupData = [];
        this.index = 0;
        this.pic_t = 0;
        this.b_stop = true;
    
        this.defaults = {
          ifChange: false
        };
    
        this.opts = $.extend({}, this.defaults, options);
      };
    
      Lightbox.prototype = {
        changePic: function () {
          var self = this;
    
          this.$pic.attr('src', this.groupData[this.index].src);
          this.$caption.text(this.groupData[this.index].caption);
        },
    
        btnSwitch: function () {
          var self = this;
    
          this.$btn_prev.click(function () {
            if (self.index <= 0) {
              self.index = self.groupData.length - 1;
            } else {
              self.index --;
            }
    
            self.changePic();
          });
    
          this.$btn_next.click(function () {
            if (self.index >= self.groupData.length - 1) {
              self.index = 0;
            } else {
              self.index ++;
            }
    
            self.changePic();
          });
        },
    
        showPop: function (curSrc) {
          this.$popMask.fadeIn();
          this.$popWin.fadeIn();
    
          this.$pic.attr('src', curSrc);
          this.$caption.text(this.groupData[this.index].caption);
    
          this.autoTop($(window).height(), this.$pic.height());
        },
    
        initalPop: function () {
          var self = this;
          var curSrc = null;
          var curId = null;
    
          this.$pic_item.click(function () {
            var curGroup = $(this).attr('data-group');
            curSrc = $(this).attr('data-source');
            curId = $(this).attr('data-id');
    
            if (self.groupName !== curGroup) {
              self.groupName = curGroup;
    
              self.getGroupData();
            }
    
            self.index = self.getIndexOf(curId);
    
            self.showPop(curSrc);
            self.btnSwitch();
    
            if (self.opts.ifChange) {
              self.$btn_prev.show();
              self.$btn_next.show();
            } else {
              self.$btn_prev.hide();
              self.$btn_next.hide();
            }
          });
    
          $(window).resize(function () {
            self.autoTop($(window).height(), self.$pic.height());
          });
    
          this.$btn_close.click(function () {
            self.$popMask.fadeOut();
            self.$popWin.fadeOut();
          });
    
          this.$popMask.click(function () {
            self.$popMask.fadeOut();
            self.$popWin.fadeOut();
          });
        },
    
        // 小方法
        autoTop: function (win_h, pic_h) {
          var pic_t = (win_h - 38 - pic_h - 10) / 2;
    
          if (pic_t <= 0) {
            pic_t = 0;
          }
    
          this.$picView.css({top: pic_t});
        },
    
        getGroupData: function () {
          var self = this;
    
          this.groupData.length = 0;
          this.$pic_item.each(function () {
            self.groupData.push({
              id: $(this).attr('data-id'),
              src: $(this).attr('data-source'),
              caption: $(this).attr('data-caption')
            });
          });
        },
    
        getIndexOf: function (curId) {
          var index = 0;
    
          $(this.groupData).each(function () {
            if (this.id === curId) {
              return false;
            } else {
              index ++;
            }
          });
    
          return index;
        },
    
        constructor: Lightbox
      };
    
      $.fn.lightbox = function (options) {
        var lightbox = new Lightbox(this, options);
    
        return lightbox.initalPop();
      };
    
    })(jQuery, window, document);
    
    
    
     
  • 相关阅读:
    python中拆分和拼接字符串
    python中find查找是否包含特定字符并返回第一个索引
    python中删除字符串左右的空格
    python中指定字符串宽度,并指定填充字符串
    python中将字符串中的制表符转换为空格
    python中统计字符串中特定字符出现的次数,内置方法count
    python中指定分隔符分割字符串,返回三元组
    学习笔记:社会科学的特质
    启示——来自《DOOM启世录》
    多语言处理 > UNICODE > IBM的ICU类库
  • 原文地址:https://www.cnblogs.com/candy-Yao/p/8608796.html
Copyright © 2020-2023  润新知