幻灯片/轮播

jQuery+CSS3炫酷可交互的图片墙特效

创客主机


Polaroid_Gallery是一款效果非常酷的可交互的jQuery和CSS3图片墙特效插件。该照片墙插件可以使用圆点导航按钮将相应的图片旋转居中显示,当点击居中的图片时,图片会翻转到反面,显示图片的信息。

使用方法:

使用该签名插件要引入jQuery文件。

HTML结构:

下面是该图片墙特效的基本HTML结构:

  1. <div class="wrap" id="wrap">
  2.   <div class="photo photo_front" id="photo_{{index}}" onclick="turn(this)">
  3.     <div class="photo-wrap">
  4.       <div class="side side-front">
  5.         <p class="image"><img src="photo/{{img}}"></p>
  6.         <p class="caption">{{caption}}</p>
  7.       </div>
  8.       <div class="side side-back">
  9.         <p class="desc">{{desc}}</p>
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

在你的图片文件夹中放置你自己的图片,然后在该文件夹下创建一个data.js文件。该文件用于描述图片的数据,代码如下:

  1. var data = [];
  2.  
  3. var dataStr = "1.DeathNote<br>\
  4. <br>\
  5. Japanese Cartoon<br>\
  6. <br>\
  7. <br>\
  8. 2.FateUBW<br>\
  9. <br>\
  10. Japanese Cartoon<br>\
  11. <br>\
  12. <br>\
  13. 3.FateZero<br>\
  14. <br>\
  15. Japanese Cartoon<br>\
  16. "
  17. var d = dataStr.split("<br><br><br>");
  18. for(var i = 0; i<d.length; i++){
  19.   var c = d[i].split("<br><br>");
  20.   data.push({
  21.     img: c[0]+ ".jpg",
  22.     caption: c[0].split(".")[1],
  23.     desc: c[1]
  24.   });
  25. }

CSS样式:

该照片墙的基本CSS样式如下:

  1. .wrap {
  2.   width: 100%;
  3.   height: 600px;
  4.   position: absolute;
  5.   top: 50%;
  6.   margin-top: -300px;
  7.   background-color: #333;
  8.   overflow: hidden;
  9.   -webkit-perspective: 800px;
  10.   -moz-perspective: 800px;
  11. }
  12.  
  13. .photo {
  14.   width: 260px;
  15.   height: 320px;
  16.   position: absolute;
  17.   z-index: 1;
  18.   box-shadow: 0 0 1px rgba(0,0,0,.01);
  19.   -webkit-transition: all 0.6s;
  20.   -moz-transition: all 0.6s;
  21.   left: 50%;
  22.   top: 50%;
  23.   margin: -160px 0 0 -130px;
  24. }
  25.  
  26. .photo .side {
  27.   width: 100%;
  28.   height: 100%;
  29.   background-color: #eee;
  30.   position: absolute;
  31.   top: 0;
  32.   right: 0;
  33.   padding: 20px;
  34.   box-sizing: border-box;
  35. }
  36.  
  37. .photo .side-front { /*display: none;*/
  38. }
  39.  
  40. .photo .side-front .image {
  41.   width: 100%;
  42.   height: 250px;
  43.   line-height: 250px;
  44.   overflow: hidden;
  45. }
  46.  
  47. .photo .side-front .image img { width: 100%; }
  48.  
  49. .photo .side-front .caption {
  50.   text-align: center;
  51.   font-size: 16px;
  52.   line-height: 50px;
  53. }
  54.  
  55. .photo .side-back { }
  56.  
  57. .photo .side-back .desc {
  58.   color: #666;
  59.   font-size: 14px;
  60.   line-height: 1.5em;
  61. }
  62.  
  63. .photo_center {
  64.   left: 50%;
  65.   top: 50%;
  66.   margin: -160px 0 0 -130px;
  67.   z-index: 999;
  68. }
  69.  
  70. .photo-wrap {
  71.   position: absolute;
  72.   width: 100%;
  73.   height: 100%;
  74.   -webkit-transform-style: preserve-3d;
  75.   -webkit-transition: all 0.6s;
  76.   -moz-transform-style: preserve-3d;
  77.   -moz-transition: all 0.6s;
  78. }
  79.  
  80. .photo-wrap .side-front {
  81.   -webkit-transform: rotateY(0deg);
  82.   -moz-transform: rotateY(0deg);
  83. }
  84.  
  85. .photo-wrap .side-back {
  86.   -webkit-transform: rotateY(180deg);
  87.   -moz-transform: rotateY(180deg);
  88. }
  89.  
  90. .photo-wrap .side {
  91.   -webkit-backface-visibility: hidden;
  92.   -moz-backface-visibility: hidden;
  93. }
  94.  
  95. .photo_front .photo-wrap {
  96.   -webkit-transform: rotateY(0deg);
  97.   -moz-transform: rotateY(0deg);
  98. }
  99.  
  100. .photo_back .photo-wrap {
  101.   -webkit-transform: rotateY(180deg);
  102.   -moz-transform: rotateY(180deg);
  103. }

下面是圆点导航按钮的CSS样式。

  1. .nav {
  2.   width: 80%;
  3.   height: 30px;
  4.   line-height: 30px;
  5.   position: absolute;
  6.   left: 10%;
  7.   bottom: 20px;
  8.   z-index: 999;
  9.   text-align: center;
  10. }
  11.  
  12. .nav .i {
  13.   width: 30px;
  14.   height: 30px;
  15.   display: inline-block;
  16.   cursor: pointer;
  17.   background-color: #aaa;
  18.   text-align: center;
  19.   border-radius: 90%;
  20.   -webkit-transform: scale(0.5);
  21.   -webkit-transition: all 0.5s;
  22.   -moz-transform: scale(0.5);
  23.   -moz-transition: all 0.5s;
  24. }
  25.  
  26. .nav .i_current {
  27.   -webkit-transform: scale(0.8);
  28.   -moz-transform: scale(0.8);
  29. }
  30.  
  31. .nav .i_back {
  32.   -webkit-transform: rotateY(-180deg) scale(0.8);
  33.   -moz-transform: rotateY(-180deg) scale(0.8);
  34.   background-color: #555;
  35. }

初始化插件:

在页面加载完成之后使用下面的代码来初始化该图片墙特效插件。

  1. $(document).ready(function(){
  2.   addPhotos();
  3. });
  4.  
  5. function select(selector) {
  6.   var method = selector.substr(0,1) == '.' ? 'getElementsByClassName' : 'getElementById';
  7.   return document[method](selector.substr(1));
  8. }
  9.  
  10. function range() {
  11.   var range = {left : {x : [], y : []}, right : {x : [], y : []}};
  12.   var wrap = {
  13.     w : select("#wrap").clientWidth,
  14.     h : select("#wrap").clientHeight
  15.   }
  16.   var photo = {
  17.     w : select(".photo")[0].clientWidth,
  18.     h : select(".photo")[0].clientHeight
  19.   }
  20.   range.wrap = wrap;
  21.   range.photo = photo;
  22.  
  23.   range.left.x = [0, wrap.w/2 - photo.w/2];
  24.   range.left.y = [0, wrap.h - photo.w/2];
  25.   range.right.x = [wrap.w/2 + photo.w/2, wrap.w];
  26.   range.right.y = [0, wrap.h - photo.w/2];
  27.  
  28.   return range;
  29. }
  30.  
  31. function sort(n) {
  32.   var _photo = select('.photo');
  33.   var photos = [];
  34.   for(i=0; i<_photo.length; i++) {
  35.     _photo[i].className = _photo[i].className.replace(/\s*photo_center\s*/, ' ');
  36.     _photo[i].className = _photo[i].className.replace(/\s*photo_front\s*/, ' ');
  37.     _photo[i].className = _photo[i].className.replace(/\s*photo_back\s*/, ' ');
  38.     _photo[i].className += ' photo_front';
  39.     _photo[i].style.left = '';
  40.     _photo[i].style.top = '';
  41.     _photo[i].style['transform'] = 'rotate(360deg) scale(1.3)';
  42.     _photo[i].style['-webkit-transform'] = 'rotate(360deg) scale(1.3)';
  43.     photos.push(_photo[i]);
  44.   }
  45.   var photo_center = select('#photo_' + n);
  46.   photo_center.className += ' photo_center';
  47.  
  48.   photo_center = photos.splice(n, 1)[0];
  49.  
  50.   var photos_left = photos.splice(0, Math.ceil(photos.length/2));
  51.   var photos_right = photos;
  52.  
  53.   var ranges = range();
  54.   for(var i=0; i<photos_left.length; i++){
  55.     photos_left[i].style.left = random(ranges.left.x) + "px";
  56.     photos_left[i].style.top = random(ranges.left.y) + "px";
  57.     photos_left[i].style['transform'] = 'rotate('+random([-150,150])+'deg) scale(1)';
  58.     photos_left[i].style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg) scale(1)';
  59.   }
  60.   for(var i = 0; i<photos_right.length; i++){
  61.     photos_right[i].style.left = random(ranges.right.x) + "px";
  62.     photos_right[i].style.top = random(ranges.right.y) + "px";
  63.     photos_right[i].style['transform'] = 'rotate('+random([-150,150])+'deg) scale(1)';
  64.     photos_right[i].style['-webkit-transform'] = 'rotate('+random([-150,150])+'deg) scale(1)';
  65.   }
  66.   var navs = select('.i');
  67.   for(var i=0; i<navs.length; i++) {
  68.     navs[i].className = navs[i].className.replace(/\s*i_current\s*/, ' ');
  69.     navs[i].className = navs[i].className.replace(/\s*i_back\s*/, ' ');
  70.   }
  71.   select('#nav_' + n).className += ' i_current '; 
  72. }
  73.  
  74. function random(range) {
  75.   var max = Math.max(range[0], range[1]);
  76.   var min = Math.min(range[0], range[1]);
  77.   var diff = max - min;
  78.   var number = Math.floor(Math.random() * diff + min);
  79.   return number;
  80. }
  81.  
  82. var data = data;
  83. function addPhotos() {
  84.   var template = select('#wrap').innerHTML;
  85.   var html = [];
  86.   var nav = [];
  87.   for (i=0; i<data.length; i++) {
  88.     var _html = template.replace('{{index}}', i)
  89.     .replace('{{img}}', data[i].img)
  90.     .replace('{{caption}}', data[i].caption)
  91.     .replace('{{desc}}', data[i].desc);
  92.     html.push(_html);
  93.     nav.push('<span id="nav_'+i+'" class="i" onclick ="turn(select(\'#photo_'+i+'\'))"> </span>');
  94.   }
  95.   html.push('<div class="nav">'+nav.join('')+'</div>');
  96.   select('#wrap').innerHTML = html.join('');
  97.   sort(random([0, data.length]));
  98. }
  99.  
  100. function turn(elem) {
  101.   var cls = elem.className;
  102.   var n = elem.id.split("_")[1];
  103.  
  104.   if(! /photo_center/.test(cls)) {
  105.     return sort(n);
  106.   }
  107.  
  108.   if(/photo_front/.test(cls)) {
  109.     cls = cls.replace(/photo_front/, 'photo_back'); 
  110.     select('#nav_' + n).className += ' i_back ';
  111.   } else {
  112.     cls = cls.replace(/photo_back/, 'photo_front');
  113.     select('#nav_' + n).className = select('#nav_' + n).className.replace(/\s*i_back\s*/, ' ');
  114.   }
  115.   return elem.className = cls;
  116. }
(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!