基于jQuery的超酷预览图展示特效代码

查看效果

下载地址

前台部分代码

 

代码

< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< meta  name ="keywords"  content ="JS代码,图片特效,JS广告代码,JS特效代码"   />
< meta  name ="description"  content ="此代码内容为基于jQuery的预览图展示特效代码，属于站长常用代码，更多图片特效代码请访问网页前端设计吧JS代码频道。"   />
< title > 基于jQuery的预览图展示特效代码_网页前端设计吧 </ title >
< style  type ="text/css" >
        
            * {  padding : 0px ;  margin : 0px ;   }
            body {  background : #D5DEE7 ;   }
            a {  color : #C8DCE5 ;   }
            h3 {  margin :  10px 10px 0 10px ;  color : #FFF ;  font : 18pt Arial, sans-serif ;  letter-spacing : -1px ;  font-weight :  bold ;    }
            
            .boxgrid {  
                width :  325px ;  
                height :  260px ;  
                margin : 10px ;  
                float : left ;  
                background : #161613 ;  
                border :  solid 2px #8399AF ;  
                overflow :  hidden ;  
                position :  relative ;  
             }
                .boxgrid img {  
                    position :  absolute ;  
                    top :  0 ;  
                    left :  0 ;  
                    border :  0 ;  
                 }
                .boxgrid p {  
                    padding :  0 10px ;  
                    color : #afafaf ;  
                    font-weight : bold ;  
                    font : 10pt "Lucida Grande", Arial, sans-serif ;  
                 }
                
            .boxcaption {  
                float :  left ;  
                position :  absolute ;  
                background :  #000 ;  
                height :  100px ;  
                width :  100% ;  
                opacity :  .8 ;  
                 /*  For IE 5-7  */
                filter :  progid:DXImageTransform.Microsoft.Alpha(Opacity=80) ;
                 /*  For IE 8  */
                -MS-filter :  "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" ;
              }
                 .captionfull .boxcaption  {
                     top :  260 ;
                     left :  0 ;
                  }
                 .caption .boxcaption  {
                     top :  220 ;
                     left :  0 ;
                  }
                
         </ style >
        
         < script  type ="text/javascript"  src ="js/jquery-1.3.1.js" ></ script >
         < script  type ="text/javascript" >
            $(document).ready( function (){
                 // To switch directions up/down and left/right just place a "-" in front of the top/left attribute
                 // Vertical Sliding
                $( ' .boxgrid.slidedown ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({top: ' -260px ' },{queue: false ,duration: 300 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({top: ' 0px ' },{queue: false ,duration: 300 });
                });
                 // Horizontal Sliding
                $( ' .boxgrid.slideright ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({left: ' 325px ' },{queue: false ,duration: 300 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({left: ' 0px ' },{queue: false ,duration: 300 });
                });
                 // Diagnal Sliding
                $( ' .boxgrid.thecombo ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({top: ' 260px ' , left: ' 325px ' },{queue: false ,duration: 300 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({top: ' 0px ' , left: ' 0px ' },{queue: false ,duration: 300 });
                });
                 // Partial Sliding (Only show some of background)
                $( ' .boxgrid.peek ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({top: ' 90px ' },{queue: false ,duration: 160 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({top: ' 0px ' },{queue: false ,duration: 160 });
                });
                 // Full Caption Sliding (Hidden to Visible)
                $( ' .boxgrid.captionfull ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({top: ' 160px ' },{queue: false ,duration: 160 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({top: ' 260px ' },{queue: false ,duration: 160 });
                });
                 // Caption Sliding (Partially Hidden to Visible)
                $( ' .boxgrid.caption ' ).hover( function (){
                    $( " .cover " ,  this ).stop().animate({top: ' 160px ' },{queue: false ,duration: 160 });
                },  function () {
                    $( " .cover " ,  this ).stop().animate({top: ' 220px ' },{queue: false ,duration: 160 });
                });
            });
         </ script >
        
</ head >
< body >

             < div  class ="boxgrid captionfull" >
                 < img  src ="images/jareck.jpg" />
                 < div  class ="cover boxcaption" >
                     < h3 > Jarek Kubicki </ h3 >
                     < p > Artist < br />< a  href ="http://www.jscss8.com/"  target ="_BLANK" > More Work </ a ></ p >
                 </ div >         
             </ div >
            
             < div  class ="boxgrid caption" >
                 < img  src ="images/kamil.jpg" />
                 < div  class ="cover boxcaption" >
                     < h3 > Kamil Smala </ h3 >
                     < p > Artist < br />< a  href ="http://www.jscss8.com/"  target ="_BLANK" > More Work </ a ></ p >
                 </ div >
             </ div >
                
             < div  class ="boxgrid slideright" >
                 < img  class ="cover"  src ="images/martin.jpg" />
                 < h3 > Martin Stranka </ h3 >
                 < p > Photographer < br />< a  href ="http://www.jscss8.com/"  target ="_BLANK" > More Work </ a ></ p >
             </ div >
             < div  class ="boxgrid thecombo" >
                 < img  class ="cover"  src ="images/florian.jpg" />
                 < h3 > Florian Nicolle </ h3 >
                 < p > Graphic Designer < br />< a  href ="http://www.jscss8.com/"  target ="_BLANK" > More Work </ a ></ p >
             </ div >
            
             < div  class ="boxgrid slidedown" >
                 < img  class ="cover"  src ="images/nonsense.jpg" />
                     < h3 > The Nonsense Society </ h3 >
                     < p > Art, Music, Word < br />< a  href ="http://www.jscss8.com/"  target ="_BLANK" > Website </ a ></ p >     
             </ div >
             < div  class ="boxgrid peek" >
                 < a  href ="http://www.jscss8.com/"  target ="_BLANK" >< img  src ="images/birss.jpg" /></ a >
                 < a  href ="http://www.jscss8.com/"  target ="_BLANK" >< img  class ="cover"  src ="images/buildinternet.jpg" /></ a >
             </ div >

    
< p > 代码整理：网页前端设计吧 www.jscss8.com </ p >
< p > ＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。 </ p >
< p ></ p >
< p >< p > 基于jQuery实现预览图+简介的内容展示代码，鼠标放在图片上可以产生多种效果，例如：显示简介，图片移动等。 < br  />
&nbsp; </ p ></ p >
< p ></ p >
</ body >
</ html >