jQuery实现朋友圈查看图片

lsy917

jQuery实现朋友圈查看图片效果，供大家参考，具体内容如下
效果： 图片点击显示大图，多张图可以滑动，左右按钮点击可切换查看图片 （左右点击切换效果不需要删除样式即可）

$ n4 f% R: Y" O7 W% Z0 `index.html 文件

1.      jQuery模仿朋友圈查看图片效果                  
2.   

复制代码

touchTouch.css 文件
0 D$ O+ x% S, t; l! {+ \9 ^, e预加载loading动图 preloader.gif

' _" O9 y* U5 T5 P左右切换按钮图片 arrows.png（不需要可删除）

1. #galleryOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; opacity:0; z-index:100000; background-color:#222; background-color:rgba(0,0,0,1); overflow:hidden; display:none; -moz-transition:opacity 1s ease; -webkit-transition:opacity 1s ease; transition:opacity 1s ease;}#galleryOverlay.visible{ opacity:1;}#gallerySlider{ height:100%; left:0; top:0; width:100%; white-space: nowrap; position:absolute; -moz-transition:left 0.4s ease; -webkit-transition:left 0.4s ease; transition:left 0.4s ease;}#gallerySlider .placeholder{ /* preloader.gif 预加载loading动图 */ background: url("preloader.gif") no-repeat center center; height: 100%; line-height: 1px; text-align: center; width:100%; display:inline-block;}#gallerySlider .placeholder:before{ content: ""; display: inline-block; height: 50%; width: 1px; margin-right:-1px;}#gallerySlider .placeholder img{ display: inline-block; max-height: 100%; max-width: 100%; vertical-align: middle;}#gallerySlider.rightSpring{ -moz-animation: rightSpring 0.3s; -webkit-animation: rightSpring 0.3s;}#gallerySlider.leftSpring{ -moz-animation: leftSpring 0.3s; -webkit-animation: leftSpring 0.3s;}/* Firefox Keyframe Animations */@-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; }}/* Safari and Chrome Keyframe Animations */@-webkit-keyframes rightSpring{ 0%{ margin-left:0px; } 50%{ margin-left:-30px; } 100%{ margin-left:0px; }}@-webkit-keyframes leftSpring{ 0%{ margin-left:0px; } 50%{ margin-left:30px; } 100%{ margin-left:0px; }}/* 左右切换按钮 *//* arrows.png 左右切换按钮图片 不需要可删除 */#prevArrow,#nextArrow{ border:none; text-decoration:none; background:url('arrows.png') no-repeat; opacity:1; cursor:pointer; position:absolute; width:43px; height:58px; top:50%; margin-top:-29px; -moz-transition:opacity 0.2s ease; -webkit-transition:opacity 0.2s ease; transition:opacity 0.2s ease;}#prevArrow:hover, #nextArrow:hover{ opacity:1;}#prevArrow{ background-position:left top; left:40px;}#nextArrow{ background-position:right top; right:40px;}/* 页码 */#pagelimit{ position:absolute; bottom:20px; left:50%; margin-left:-18px; color:#fff; font-size:1.4rem;}

复制代码

  }7 X9 j- d; i1 ?, s8 ~touchTouch.jquery.js 文件
[code](function(){ /* Private variables */ var overlay = $('<div id="galleryOverlay">'), slider = $('<div id="gallerySlider">'), prevArrow = $(''), nextArrow = $(''), pageSpan = $('<span id="pagelimit">