码迷,mamicode.com
首页 > Web开发 > 详细

jQuery/CSS3实现图片层叠展开特效

时间:2014-08-18 01:28:23      阅读:457      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   os   io   for   ar   2014   

这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效。主要由HTML、CSS以及jQuery代码组成。

bubuko.com,布布扣

HTML代码:

    把要用到的小图片列出来,HTML结构非常简单。

  1. <div id="page_wrap"> 
  2.   <!--Stack 1  -->
  3.   <div class="image_stack" style="margin-left:600px">
  4.    <img id="photo1" class="stackphotos" src="images/lanrenzhijia2.jpg"  >
  5.     <img  id="photo2" class="stackphotos" src="images/lanrenzhijia3.jpg" >
  6.      <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia1.jpg" > 
  7.      </div>
  8.      <!--Stack 2  -->
  9.   <div class="image_stack" style="margin-left:300px">
  10.    <img id="photo1" class="stackphotos" src="images/lanrenzhijia4.jpg"  >
  11.     <img  id="photo2" class="stackphotos" src="images/lanrenzhijia5.jpg" >
  12.      <img   id="photo3" class="stackphotos"  src="images/lanrenzhijia6.jpg" > 
  13.      </div>
  14.      
  15.   <div class="single_photo">
  16.     <ul id="pics">
  17.       <li><a href="#pic1" title="Photo"><img src="images/lanrenzhijia3.jpg" alt="picture"></a></li>
  18.     </ul>
  19.   </div>
  20. </div>

 

接下来是CSS,相对复杂一点,因为有用到CSS3相关的一些特性。


CSS代码:

 

   主要是rotate实现图片翻转折叠的效果,另外指定了0.2s的ease动画。

 

  1. .image_stack img { /* css style for photo stack */
  2.     border: none;
  3.     text-decoration: none;
  4.     position: absolute;
  5.     margin-left:0px;
  6.     width: 5074px;
  7.     height: 5074px;
  8. }
  9. .image_stack { /* css style for photo stack */
  10.     width: 400px;
  11.     position: absolute;
  12.     margin:60px 10px 10px;
  13. }
  14. .image_stack img { /* css style for photo stack */
  15.     position: absolute;
  16.     border: 4px solid #FFF;
  17.     box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  18.     -moz-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  19.     -webkit-box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  20.     z-index: 9999;
  21.     /* Firefox */
  22.     -moz-transition: all 0.2s ease;
  23.     /* WebKit */
  24.     -webkit-transition: all 0.2s ease;
  25.     /* Opera */
  26.     -o-transition: all 0.2s ease;
  27.     /* Standard */
  28.     transition: all 0.2s ease;
  29. }
  30. .image_stack #photo1 {  /* position of last photo in the stack */
  31.     top: 8px;
  32.     left: 108px;
  33. }
  34. .image_stack #photo2 {/* position of middle photo in the stack */
  35.     top: 6px;
  36.     left: 104px;
  37. }
  38. .image_stack #photo3 {/* position of first photo at the top in the stack */
  39.     top: 4px;
  40.     left: 100px;
  41.     right: 100px;
  42. }
  43. .image_stack .rotate1 {/* rotate last image 15 degrees to the right */
  44.     -webkit-transform: rotate(15deg); /* safari and chrome */
  45.     -moz-transform: rotate(15deg);/*firefox browsers */
  46.     transform: rotate(15deg);/*other */
  47.     -ms-transform:rotate(15deg); /* Internet Explorer 9 */
  48.     -o-transform:rotate(15deg); /* Opera */
  49. }
  50. .image_stack .rotate2 {/* css not used*/
  51.     -webkit-transform: rotate(0deg); /* safari and chrome */
  52.     -moz-transform: rotate(0deg);/*firefox browsers */
  53.     transform: rotate(0deg);/*other */
  54.     -ms-transform:rotate(0deg); /* Internet Explorer 9 */
  55.     -o-transform:rotate(0deg); /* Opera */
  56. }
  57. .image_stack .rotate3 {/*rotate first image 15 degrees to the left*/
  58.     -webkit-transform: rotate(-15deg); /* safari and chrome */
  59.     -moz-transform: rotate(-15deg); /*firefox browsers */
  60.     transform: rotate(-15deg);/*other */
  61.     -ms-transform:rotate(-15deg); /* Internet Explorer 9 */
  62.     -o-transform:rotate(-15deg); /* Opera */
  63.     cursor: pointer;
  64. }

 

jQuery代码:

  1. $(document).ready(function() { 
  2. $(".image_stack").delegate(‘img‘, ‘mouseenter‘, function() {//when user hover mouse on image with div id=stackphotos 
  3.         if ($(this).hasClass(‘stackphotos‘)) {//
  4.         // the class stackphotos is not really defined in css , it is only assigned to each images in the photo stack to trigger the mouseover effect on  these photos only 
  5.             
  6.             var $parent = $(this).parent();
  7. $parent.find(‘img#photo1‘).addClass(‘rotate1‘);//add class rotate1,rotate2,rotate3 to each image so that it rotates to the correct degree in the correct direction ( 15 degrees one to the left , one to the right ! )
  8. $parent.find(‘img#photo2‘).addClass(‘rotate2‘);
  9. $parent.find(‘img#photo3‘).addClass(‘rotate3‘);
  10. $parent.find(‘img#photo1‘).css("left","150px"); // reposition the first and last image 
  11. $parent.find(‘img#photo3‘).css("left","50px");
  12.         }
  13.     })
  14.     .delegate(‘img‘, ‘mouseleave‘, function() {// when user removes cursor from the image stack
  15.         $(‘img#photo1‘).removeClass(‘rotate1‘);// remove the css class that was previously added to make it to its original position
  16.             $(‘img#photo2‘).removeClass(‘rotate2‘);
  17.             $(‘img#photo3‘).removeClass(‘rotate3‘);
  18.             $(‘img#photo1‘).css("left","");// remove the css property ‘left‘ value from the dom
  19. $(‘img#photo3‘).css("left","");
  20.         
  21.     });;
  22. });

     其实jQuery也没什么事情,主要是动态为图片增加和删除类,用addClass和removeClass实现,这样鼠标滑过图片就可以翻转,鼠标离开图片又能够恢复,很不错吧。

jQuery/CSS3实现图片层叠展开特效,布布扣,bubuko.com

jQuery/CSS3实现图片层叠展开特效

标签:style   blog   http   os   io   for   ar   2014   

原文地址:http://www.cnblogs.com/yule9527/p/3918612.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!