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图片展示，并结合描述中的“带小导航”、“带上下左右按钮”的特性，为您揭示其背后的实现原理和关键代码。 首先，我们需要理解3D效果的基本概念。在Web上，我们通常通过CSS...
这是一款效果非常炫的jQuery图片3D背景视觉差特效插件。该图片视觉差插件使用CSS matrix3d transforms来创建一个3D空间，使你能够使用鼠标和3D空间中的图片做交互，在鼠标移动的过程中，各种图片形成很酷的视觉差...
jQuery实现的超炫图片3D背景视觉差特效插件源码是一款实现了三款超炫酷的3D背景图片视觉差效果代码，非常逼真且有意思，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使用。本段代码兼容目前最新的各类...
【超炫JQuery照片墙特效】是一种常见的网页交互设计，主要利用JQuery库来实现动态、引人入胜的图片展示效果。这种特效通常应用于个人作品集、摄影网站或者产品展示页面，为用户提供一个视觉上吸引人的浏览体验。在本...
3D旋转特效主要基于计算机图形学中的三维坐标系统，通过改变物体在X、Y、Z轴上的角度来实现视觉上的旋转效果。在Web开发中，这种效果通常通过JavaScript库如jQuery和CSS3的transform属性实现。给定的压缩包文件可能...
更详细"超炫jQuery测试答题功能”特效教程，http://www.sucaihuo.com/js/39.html。你也可以在素材火网页特效下载 http://www.sucaihuo.com/js，都是优质素材，最主要是既有教程，也有演示并且可下载哦，技术大咖也来...
在本项目中，我们主要探讨的是一个基于Jquery的超炫3D图片特效，开发者通过增加元素的绝对定位功能，创造出一种独特的视觉体验。这种特效不仅能够吸引用户的注意力，还能为网站增添互动性和创新性，使得用户体验更加...
总结来说，"超炫jquery产品图片列表排序源码"是一个结合了jQuery选择器、事件处理、DOM操作、动画效果和可能的拖放排序的实例。它展示了如何用jQuery创造互动性强、视觉效果丰富的网页元素，对于学习和提升...
本教程将深入探讨如何利用JQuery实现超炫的图片展示效果。 首先，我们需要理解JQuery的核心概念。JQuery是由John Resig创建的一个轻量级、高性能的JavaScript库，它的目标是简化HTML文档遍历、事件处理、动画以及...
通过以上步骤，你将能够创建一个功能齐全且视觉效果出众的jQuery图片特效。在实际开发中，记得进行充分的测试，确保在各种浏览器和设备上的兼容性和性能。此外，不断调整和完善CSS和JavaScript代码，以达到最佳的...
这个"超炫3D般的页面特效汇集"可能包含了一些利用 WebGL 实现的3D页面元素，如旋转产品展示、3D地图、立体图表或者复杂的3D模型交互等。 源码说明.htm 文件可能是该项目的源代码说明文档，其中详细解释了每个3D特效...
本项目“jquery超炫图片效果”利用jQuery的强大功能，为用户提供了一种创新且引人注目的图片展示体验。接下来，我们将深入探讨这个特效背后的关键技术和实现方法。 首先，该特效的核心是缩略图的旋转展示。在网页中...
本文将深入探讨如何使用jQuery和HTML5创建一个超炫的相册图片打开动画特效，以及相关的知识点。 首先，jQuery是一个JavaScript库，它简化了JavaScript的DOM操作、事件处理和动画设计。它提供了丰富的API，使得...
jQuery图片翻页超炫特效是一种常见的网页交互设计，它利用jQuery库的强大功能为用户提供引人入胜的视觉体验。在网页设计中，这种特效能够使图片展示更加生动有趣，增加用户的浏览兴趣。以下是对这个主题的详细解释：...
本篇文章将深入探讨“超炫的jQuery多格左右滑动图片特效代码”的实现原理及关键知识点。 1. **jQuery库**：jQuery是一个广泛使用的JavaScript库，简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。在这款特效...
jquery.parallax-scroll是一款效果超炫的平滑垂直滚动视觉差jQuery特效。该视觉差特效使用requestAnimationFrame和CSS3 3D transitions在页面垂直滚动时制作非常平滑的过渡动画效果。
【jQuery和CSS3超炫3D整屏垂直滚动页面特效】是现代网页设计中一种吸引用户注意力的独特技术，它结合了jQuery的动态处理能力和CSS3的丰富视觉效果，为用户提供了一种全新的浏览体验。这种特效使得网页内容可以以3D...
在《jQuery特效实例大全展示》中，"一款超炫的后台，Ext模拟Windows桌面"可能是其中的一个亮点。这个例子展示了如何使用jQuery和可能的ExtJS框架来创建一个类似Windows操作系统的桌面界面。这种特效通常包括可拖动的...
【jQuery彩色心形冒泡动画特效】是一种使用JavaScript库jQuery创建的互动视觉效果，它将心形图标设计成彩色的气泡，这些气泡在网页上以动态的方式向上浮动，为用户带来生动有趣的视觉体验。这个特效适用于各种场合，...