jQuery图片动画遮罩层lightbox特效解决办法

内容摘要
这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例,具有一定的参考价值,可以用来参考一下。

对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴
文章正文

这篇文章主要为大家详细介绍了jQuery图片动画遮罩层lightbox特效简单示例,具有一定的参考价值,可以用来参考一下。

对phpjQuery图片动画遮罩层lightbox特效简单示例对此感兴趣的朋友,看看idc笔记做的技术笔记!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<code class="language-javascript">/**
 *
 * @param
 * @arrange (www.idcnote.com)
 **/
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片动画遮罩层lightbox特效</title>
 
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<link rel="stylesheet" href="css/magnific-popup.min.css" />
<link rel="stylesheet" href="css/style.css">
 
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="zzsc-container">
    <div class='container'>
      <div class='row'>
        <div class='col-xs-12'>
          <h1 class='text-center'>
            Overlay CSS
          </h1>
          <div class='padding-top-20px'></div>
        </div>
      </div>
    </div>
    <div class='container'>
      <div class='row'>
        <div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box'>
          <a data-effect='mfp-zoom-in' href='img/1.jpg'>
            <div class='box-1'>
              <img class='img-responsive' src='img/thumb_1.jpg'>
              <div class='lupa text-center'>
                <i class='fa fa-search-plus'></i>
              </div>
            </div>
          </a>
        </div>
        <div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box'>
          <a data-effect='mfp-3d-flip' href='img/2.jpg'>
            <div class='box-2'>
              <img class='img-responsive' src="img/thumb_2.jpg">
              <div class='lupa text-center'>
                <i class='fa fa-search-plus'></i>
              </div>
            </div>
          </a>
        </div>
        <div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box'>
          <a data-effect='mfp-horizontal-in-out' href='img/3.jpg'>
            <div class='box-3'>
              <img class='img-responsive' src='img/thumb_3.jpg'>
              <div class='lupa text-center'>
                <i class='fa fa-search-plus'></i>
              </div>
            </div>
          </a>
        </div>
        <div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 magnificPopup__Box'>
          <a data-effect='mfp-vertical-topIn-bottomOut' href='img/4.jpg'>
            <div class='box-4'>
              <img class='img-responsive' src='img/thumb_4.jpg'>
              <div class='lupa text-center'>
                <i class='fa fa-search-plus'></i>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
</div>
 
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.js"></script>
<script type="text/javascript">
    if (/iP(hone|od|ad)/.test(navigator.platform)) {
        $('*').css({
            "cursor": "pointer"
        });
    }
    $('.preloader').delay(3500).fadeOut(600);
    $(document).ready(function () {
        $('.magnificPopup__Box').magnificPopup({
            delegate: 'a',
            type: 'image',
            removalDelay: 300,
            callbacks: {
                beforeOpen: function () {
                    this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure magnificPopup__Animus');
                    this.st.mainClass = this.st.el.attr('data-effect');
                }
            },
            closeOnContentClick: true,
            midClick: true
        })
    });
</script>
 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html></code>

注:关于jQuery图片动画遮罩层lightbox特效简单示例的内容就先介绍到这里,更多相关文章的可以留意

代码注释

作者:喵哥笔记

IDC笔记

学的不仅是技术,更是梦想!