jQuery 3D 模仿flash 图片旋转放大特效实例
前台部分代码
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![ExpandedBlockStart.gif](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
<!
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 >
< 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 >