首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-11-18 
超炫jQuery3D图片旋转放大特效实例!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://ww

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

<!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 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="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" longdesc="http://jquery.com/" /> <img title="sinatra at the beach 1" src="images/sinatra_beach_1.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 2" src="images/sinatra_beach_2.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 3" src="images/sinatra_beach_3.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 4" src="images/sinatra_beach_4.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 5" src="images/sinatra_beach_5.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 6" src="images/sinatra_beach_6.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 7" src="images/sinatra_beach_7.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> <img title="sinatra at the beach 8" src="images/sinatra_beach_8.jpg" alt="超炫jQuery3D图片旋转放大奇效实例" width="500" height="375" /> </div> </body></html>

?

热点排行