列表中图片点击之后全屏查看JS

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<section id="exemple">

  <h2>列表中图片点击之后全屏查看JS</h2>

  <div class="box"> <a href="images/nuke.jpg" class="swipebox"> <img src="images/nuke_thumb.jpg"> </a> </div>

  <div class="box"> <a href="images/leap.jpg" class="swipebox"> <img src="images/leap_thumb.jpg"> </a> </div>

  <div class="box"> <a href="images/reine.jpg" class="swipebox"> <img src="images/reine_thumb.jpg"> </a> </div>

  <div class="box"> <a href="images/neptune.jpg" class="swipebox"> <img src="images/neptune_thumb.jpg"> </a> </div>

  <div class="clear"></div>

</section>

4、书写css代码。

* { margin: 0; padding: 0; }

img { border: none; }

.swipebox { overflow: hidden!important; }

#swipebox-overlay img { border: none!important; }

#swipebox-overlay { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 99999!important; overflow: hidden; -user-select: none; -moz-user-select: none; user-select: none; }

#swipebox-slider { height: 100%; left: 0; top: 0; width: 100%; white-space: nowrap; position: absolute; display: none; }

#swipebox-slider .slide { background: url("../images/loader.gif") no-repeat center center; height: 100%; width: 100%; line-height: 1px; text-align: center; display: inline-block; }

#swipebox-slider .slide:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; }

#swipebox-slider .slide img { display: inline-block; max-height: 100%; max-width: 100%; margin: 0; padding: 0; width: auto; height: auto; vertical-align: middle; }

#swipebox-action, #swipebox-caption { position: absolute; left: 0; z-index: 999; height: 50px; width: 100%; }

#swipebox-action { bottom: -50px; }

#swipebox-action.visible-bars { bottom: 0; }

#swipebox-action.force-visible-bars { bottom: 0!important; }

#swipebox-caption { top: -50px; text-align: center; }

#swipebox-caption.visible-bars { top: 0; }

#swipebox-caption.force-visible-bars { top: 0!important; }

#swipebox-action #swipebox-prev, #swipebox-action #swipebox-next, #swipebox-action #swipebox-close { background-image: url("../images/icons.png"); background-repeat: no-repeat; border: none!important; text-decoration: none!important; cursor: pointer; position: absolute; width: 50px; height: 50px; top: 0; }

#swipebox-action #swipebox-close { background-position: 15px 12px; left: 40px; }

#swipebox-action #swipebox-prev { background-position: -32px 13px; right: 100px; }

#swipebox-action #swipebox-next { background-position: -78px 13px; right: 40px; }

#swipebox-action #swipebox-prev.disabled, #swipebox-action #swipebox-next.disabled {

 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; }

#swipebox-slider.rightSpring { -moz-an   imation: rightSpring 0.3s; -an   imation: rightSpring 0.3s; }

#swipebox-slider.leftSpring { -moz-an   imation: leftSpring 0.3s; -an   imation: leftSpring 0.3s; }

 @-moz-keyframes rightSpring {  0% { margin-left: 0px;} 50% { margin-left: -30px;} 100% { margin-left: 0px;}}

 @-moz-keyframes leftSpring {  0% { margin-left: 0px;} 50% { margin-left: 30px;} 100% { margin-left: 0px;}}

 @-keyframes rightSpring {  0% { margin-left: 0px;} 50% { margin-left: -30px;} 100% { margin-left: 0px;}}

 @-keyframes leftSpring {  0% { margin-left: 0px;} 50% { margin-left: 30px;} 100% { margin-left: 0px;}}

#swipebox-overlay { background: #0d0d0d; }

#swipebox-action, #swipebox-caption { text-shadow: 1px 1px 1px black; background-color: #0d0d0d; background-image: -gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #0d0d0d), color-stop(100%, #000000)); background-image: -linear-gradient(#0d0d0d, #000000); background-image: -moz-linear-gradient(#0d0d0d, #000000); background-image: -o-linear-gradient(#0d0d0d, #000000); background-image: linear-gradient(#0d0d0d, #000000); -box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black; -moz-box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black; box-shadow: 0 1px 1px 1px #212121, inset 0 1px 1px 1px black;  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=95);

opacity: 0.95; }

#swipebox-action { -box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black; -moz-box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black; box-shadow: 0 -1px -1px 1px #212121, inset 0 -1px -1px 1px black; }

#swipebox-caption { color: white!important; font-size: 15px; line-height: 43px; font-family: Helvetica, Arial, sans-serif; }

.box { width: 25%; height: auto; float: left; margin-bottom: 0.7em; text-align: center; }

.box .swipebox { display: block; width: 100%; height: auto; }

.box .swipebox img { width: 98%; height: auto; vertical-align: bottom; }

5、书写并添加js代码。

<script src="js/jquery-1.9.0.min.js"></script>

<script src="js/ios-orientationchange-fix.js"></script>

<script src="js/jquery.swipebox.min.js"></script>

<script type="text/javascript">

jQuery(function($) {

$(".swipebox").swipebox();

});

</script>

6、代码整体结构。

7、查看效果。