超炫jQuery3D图片旋转放大特效实例

查看效果

下载地址

jQuery 3D 模仿flash 图片旋转放大特效实例

前台部分代码

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en"  lang ="en" >
< head >
     < title > 3D Image Carousel </ title >
    
     < script  type ="text/javascript"  src ="jquery/jquery-1.2.6.min.js" ></ script >
     < script  type ="text/javascript"  src ="jquery/Tween.js" ></ script >
     < script  type ="text/javascript"  src ="jquery/jquery.carousel3d.js" ></ script >
        
     < style  type ="text/css"  title ="text/css" >
         
         #holder_images  {  display :  none ;   }
    
        #carousel img
         {
            border :  1px solid #ccc ;
            padding :  1px ;
            background-color :  #eee ;
         }
        #carousel img.link:hover
         {
            border :  4px solid #0e0893 ;
         }
     </ style >

     < script  type ="text/javascript" >
        jQuery( function ($) {
            $( " #carousel " ).html($( " #holder_images " ).html()).carousel3d({ fadeEffect:  1 , centerX: $( ' #carousel ' ).offset().left  +  $( ' #carousel ' ).width() / 2 }); 
        });
     </ script >

</ head >
< body >
    
     < div  id ="carousel" ></ div >
            
     < div  id ="holder_images" >     
         < img  class ="link"  title ="to make an image a page link, add class 'link' and set the longdesc attr to a web address"  src ="images/jquery_plugins.png"  alt ="jquery_plugins"  width ="500"  height ="375"  longdesc ="http://jquery.com/"   />  
         < img  title ="sinatra at the beach 1"  src ="images/sinatra_beach_1.jpg"  alt ="sinatra_beach_1"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 2"  src ="images/sinatra_beach_2.jpg"  alt ="sinatra_beach_2"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 3"  src ="images/sinatra_beach_3.jpg"  alt ="sinatra_beach_3"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 4"  src ="images/sinatra_beach_4.jpg"  alt ="sinatra_beach_4"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 5"  src ="images/sinatra_beach_5.jpg"  alt ="sinatra_beach_5"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 6"  src ="images/sinatra_beach_6.jpg"  alt ="sinatra_beach_6"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 7"  src ="images/sinatra_beach_7.jpg"  alt ="sinatra_beach_7"  width ="500"  height ="375"   />  
         < img  title ="sinatra at the beach 8"  src ="images/sinatra_beach_8.jpg"  alt ="sinatra_beach_8"  width ="500"  height ="375"   />  
     </ div >                 
</ body >
</ html >

 

 

 

 

转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/28/1766410.html