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>
分享到:
相关推荐
jquery 超炫3D图片 带小导航 带上下左右按钮 效果超炫
这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间,使你能够使用鼠标和3D空间中的图片做交互,在鼠标移动的过程中,各种图片形成很酷的视觉差...
jQuery实现的超炫图片3D背景视觉差特效插件源码是一款实现了三款超炫酷的3D背景图片视觉差效果代码,非常逼真且有意思,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类...
超炫JQuery照片墙特效
jquery弹出层特效超炫jquery弹出层特效超炫jquery弹出层特效超炫
更详细"超炫jQuery测试答题功能”特效教程,http://www.sucaihuo.com/js/39.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js,都是优质素材,最主要是既有教程,也有演示并且可下载哦,技术大咖也来...
超炫的jquery html5相册图片打开动画特效 超炫的jquery html5相册图片打开动画特效 超炫的jquery html5相册图片打开动画特效
超炫jquery图片展示例子 超炫jquery图片展示例子 翻转,立体 太空
超炫的 JQuery 图片展示拿出来和大家分享一下!2分只是意思意思一下...
( 超炫的3d图片效果-自己开发(增加元素绝对定位功能)Jquery 特效 保证您没见过的
又一个jQuery图片翻页超炫特效,效果很不错的,学习了
超炫jquery产品图片列表排序源码 广州威特教育提供. www.wtjy.com.cn
jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。
超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效 超炫3D下拉菜单网页特效
Jquery 图片 翻页 超炫 特效
超炫jQuery实现的图片预览效果, 超炫jQuery实现的图片预览效果
这是一款可互动的360度超炫3D旋转立方体动画特效。用户可以使用鼠标拖动立方体来查看各个面,或者通过点击左侧的导航链接页可以切换到立方体相应的面中。
超炫的一款jquery广告图片特效代码,采用仿天猫首页幻灯的多格组图显示方式,可以设置左右滑动显示第二组图片,支持鼠标响应遮罩效果,视觉效果很好,做首页广告推荐不错。
CSS实现360度超炫3D旋转立方体动画特效源码.zip
超炫3D般的页面特效汇集,充分展示了3D效果