推荐一个非常有意思的jquery拖拉门效果

发布于，归属于jquery插件。 只剩下板凳啦！ 共有515人围观    

由于截图不够直观体现其效果。我已将此插件上传到空间。

其实实现起来并不难，先将1张图片复制四份，并设置其为绝对定位，放入四个绝对定位层，四个绝对定位层，分别置于.caption容器层的四角，当然要重新设置下绝对定位层内图片的位置。嘿嘿接下来就是调用JQ的特效来实现其动画效果。

 

来看其html代码：

  1. <div class="qitem"> 
  2.     <a href="http://www.google.com"><img src="1.gif" alt="Test 1" title="" width="126" height="126"/></a> 
  3.     <span class="caption"><h4>Night Club</h4><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span> 
  4. </div>

来看其javascript代码：

  1. $(document).ready(function() {  
  2.  
  3.     //Custom settings  
  4.     var style_in = 'easeOutBounce';  
  5.     var style_out = 'jswing';  
  6.     var speed_in = 1000;  
  7.     var speed_out = 300;      
  8.  
  9.     //Calculation for corners  
  10.     var neg = Math.round($('.qitem').width() / 2) * (-1);     
  11.     var pos = neg * (-1);     
  12.     var out = pos * 2;  
  13.       
  14.     $('.qitem').each(function () {  
  15.       
  16.         //grab the anchor and image path  
  17.         url = $(this).find('a').attr('href');  
  18.         img = $(this).find('img').attr('src');  
  19.           
  20.         //remove the image  
  21.         $('img', this).remove();  
  22.           
  23.         //append four corners/divs into it  
  24.         $(this).append('<DIV class=topLeft></DIV><DIV class=topRight></DIV><DIV class=bottomLeft></DIV><DIV class=bottomRight></DIV>');  
  25.           
  26.         //set the background image to all the corners  
  27.         $(this).children('div').css('background-image','url('+ img + ')');  
  28.  
  29.         //set the position of corners  
  30.         $(this).find('div.topLeft').css({top:0, left:0, width:pos , height:pos});     
  31.         $(this).find('div.topRight').css({top:0, left:pos, width:pos , height:pos});      
  32.         $(this).find('div.bottomLeft').css({bottom:0, left:0, width:pos , height:pos});   
  33.         $(this).find('div.bottomRight').css({bottom:0, left:pos, width:pos , height:pos});    
  34.  
  35.     }).hover(function () {  
  36.       
  37.         //animate the position  
  38.         $(this).find('div.topLeft').stop(false, true).animate({top:neg, left:neg}, {duration:speed_out, easing:style_out});   
  39.         $(this).find('div.topRight').stop(false, true).animate({top:neg, left:out}, {duration:speed_out, easing:style_out});      
  40.         $(this).find('div.bottomLeft').stop(false, true).animate({bottom:neg, left:neg}, {duration:speed_out, easing:style_out});     
  41.         $(this).find('div.bottomRight').stop(false, true).animate({bottom:neg, left:out}, {duration:speed_out, easing:style_out});    
  42.                   
  43.     },  
  44.       
  45.     function () {  
  46.  
  47.         //put corners back to the original position  
  48.         $(this).find('div.topLeft').stop(false, true).animate({top:0, left:0}, {duration:speed_in, easing:style_in});     
  49.         $(this).find('div.topRight').stop(false, true).animate({top:0, left:pos}, {duration:speed_in, easing:style_in});      
  50.         $(this).find('div.bottomLeft').stop(false, true).animate({bottom:0, left:0}, {duration:speed_in, easing:style_in});   
  51.         $(this).find('div.bottomRight').stop(false, true).animate({bottom:0, left:pos}, {duration:speed_in, easing:style_in});    
  52.       
  53.     }).click (function () {  
  54.           
  55.         //go to the url  
  56.         window.location = $(this).find('a').attr('href');     
  57.     });  
  58.  
  59. });
（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

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

只剩下板凳了！

  1. 姚迎迎

    这个挺有意思

同类