使用jquery创建垂直滑动缩略图效果

发布于，归属于jquery教程。 沙发还空着，抢！ 共有226人围观    

bar

这个动画效果有点意思。以前曾经发过类似的效果。
《推荐一个非常有意思的jquery拖拉门效果》

html

 

  1. <div class="qitem">
  2.     <a href="http://www.google.com"><img src="image.gif" alt="Test 1" title="" width="140" height="140"/></a>
  3.     <span class="caption"><h4>Title1</h4><p>Description</p></span>
  4. </div>

css

  1. body {
  2.     font-family:arial;   
  3. }
  4.  
  5. .qitem {
  6.     width:140px;
  7.     height:140px;   
  8.     border:4px solid #222;   
  9.     margin:5px 5px 5px 0;
  10.     background: url('bg.gif') no-repeat;   
  11.    
  12.     /* required to hide the image after resized */
  13.     overflow:hidden;
  14.    
  15.     /* for child absolute position */
  16.     position:relative;
  17.    
  18.     /* display div in line */
  19.     float:left;
  20.     cursor:hand; cursor:pointer;
  21. }
  22.  
  23.     .qitem img {
  24.         border:0;
  25.    
  26.         /* allow javascript moves the img position*/
  27.         position:absolute;
  28.         z-index:200;
  29.     }
  30.  
  31.     .qitem .caption {
  32.         position:absolute;
  33.         z-index:0;   
  34.         color:#ccc;
  35.         display:block;
  36.     }
  37.  
  38.         .qitem .caption h4 {
  39.             font-size:12px;
  40.             padding:10px 5px 0 8px;
  41.             margin:0;
  42.             color:#369ead;
  43.         }
  44.  
  45.         .qitem .caption p {
  46.             font-size:10px;   
  47.             padding:3px 5px 0 8px;
  48.             margin:0;
  49.         }
  50.  
  51.  
  52.  
  53. /* Setting for bars */
  54. .bar1, .bar2, .bar3, .bar4 {
  55.     position:absolute;
  56.     background-repeat: no-repeat;
  57.     z-index:200;
  58. }
  59.  
  60. .clear {
  61.     clear:both;   
  62. }

javascript

  1. $(document).ready(function() {
  2.  
  3.     //Custom settings
  4.     var style_in = 'easeOutBounce';
  5.     var style_out = 'jswing';
  6.     var speed_in = 800;
  7.     var speed_out = 300;   
  8.  
  9.     //Top and bottom
  10.     var    top = $('.qitem').height() * (-1);
  11.     var    bottom = $('.qitem').height();
  12.  
  13.     $('.qitem').each(function () {
  14.  
  15.         //retrieve all the details of the image before removing it
  16.         url = $(this).find('a').attr('href');
  17.         img = $(this).find('img').attr('src');
  18.         alt = $(this).find('img').attr('img');
  19.         width = $(this).width() / 4;
  20.         height = $(this).height();
  21.        
  22.         //remove the image and append 4 div into it
  23.         $('img', this).remove();
  24.         $(this).append('');
  25.        
  26.         //set the image as background image to all the bars
  27.         $(this).children('div').css('background-image','url('+ img + ')');
  28.  
  29.         //Divide the image into 4 bars and rebuild the image
  30.         $(this).find('div.bar1').css({top:0, left:0, width:width, height:height, backgroundPosition:'0 0' });   
  31.         $(this).find('div.bar2').css({top:0, left:width, width:width, height:height, backgroundPosition:(width*-1) + 'px 0' });   
  32.         $(this).find('div.bar3').css({bottom:0, left:width*2, width:width, height:height, backgroundPosition:(width*-2) + 'px 0' });   
  33.         $(this).find('div.bar4').css({bottom:0, left:width*3, width:width , height:height, backgroundPosition:(width*-3) + 'px 0' });
  34.  
  35.     }).hover(function () {
  36.        
  37.         //Move those bar, 1st and 3rd move upward, 2nd and 4th move downward
  38.         $(this).find('div.bar1').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});   
  39.         $(this).find('div.bar2').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});   
  40.         $(this).find('div.bar3').stop(false, true).animate({top:top}, {duration:speed_out, easing:style_out});   
  41.         $(this).find('div.bar4').stop(false, true).animate({top:bottom}, {duration:speed_out, easing:style_out});   
  42.                
  43.     },
  44.    
  45.     function () {
  46.  
  47.         //Back to default position
  48.         $(this).find('div.bar1').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   
  49.         $(this).find('div.bar2').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   
  50.         $(this).find('div.bar3').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   
  51.         $(this).find('div.bar4').stop(false, true).animate({top:0}, {duration:speed_in, easing:style_in});   
  52.    
  53.     }).click (function () {
  54.        
  55.         //make the whole box clickable
  56.         window.location = $(this).find('a').attr('href');   
  57.     });
  58.  
  59. });

原文：http://www.queness.com/post/1306/create-a-vertical-sliding-bar-thumbnail-effect-with-jquery

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类