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

作者：凡人多烦事01 | 2024-02-20 19:16:56

踩

jq图片3d旋转实例

查看效果

下载地址

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/120684