`

javascript 实现立体翻转效果

阅读更多
这里介绍jquery的一种插件,用来实现div或者图片的立体翻转效果(不是平移),详细配置如下:
jquery-1.3.2.js
jquery-ui-1.7.2.custom.min.js
jquery.flip.js

(见附件)
flip插件所有参数说明如下:
content
   定义翻转后元素的新内容,可以是:文本 、 HTML 或 jQuery 对象
direction
   定义元素翻转的方向,可选:tb/bt/lr/rl ,默认为 tb
color
   定义元素翻转后的背景颜色,默认是 #999999 (从 Firebug 查看得知)
speed
   定义翻转的速度,默认为 500 毫秒
onBefore
   定义元素翻转之前的回调函数
onAnimation
   定义元素翻转到一半时的回调函数
onEnd
   定义元素翻转之后的回调函数
  • 大小: 434.3 KB
  • 大小: 61.6 KB
  • 大小: 334.5 KB
分享到:
评论
1 楼 nomandia 2011-10-09  
http://lab.smashup.it/flip/

相关推荐

    Roundabout.js演示6种图片立体旋转效果

    **Roundabout.js:图片立体旋转效果的魔法** Roundabout.js是一个强大的JavaScript库,专为创建动态、立体感的图片轮播效果而设计。这个库利用CSS3的转换和动画特性,为网页设计师提供了六种独特的图片旋转效果,...

    HTML+CSS+JavaScript实现立体式图片旋转特效源码.zip

    在本资源中,“HTML+CSS+JavaScript实现立体式图片旋转特效源码.zip”是一个包含用于创建动态、立体感的图片旋转效果的代码示例。这个特效可以为网站增添互动性和视觉吸引力,通常用于产品展示或者作为吸引用户注意...

    纯JS模拟flash实现3D立体旋转效果

    总结来说,这个项目通过纯JavaScript实现了3D立体旋转效果,展示了JavaScript和CSS3的强大组合。开发者通过精心设计的代码,使得3D旋转木马效果在网页上生动呈现,而无需依赖Flash。这样的技术不仅有助于提升用户...

    jquery实现立体旋转木马效果

    在网页设计中,jQuery ...总的来说,使用jQuery实现立体旋转木马效果是一项结合了HTML、CSS和JavaScript技术的工作,它能为网站增加互动性和吸引力。通过不断练习和优化,你可以创造出更复杂、更吸引人的旋转木马效果。

    jQuery 实现立体旋转木马

    本项目“jQuery实现立体旋转木马”是利用jQuery来创建一个具有立体效果的旋转木马展示,常见于网站产品展示或图片滑动效果中。这种效果可以吸引用户注意力,提供一种动态的用户体验。 首先,我们需要了解旋转木马的...

    立体翻转效果焦点图特效代码

    立体翻转是基于二维平面上模拟三维空间的转换,通过改变元素的旋转角度和透视效果,让图像仿佛从一个面翻转到另一个面,呈现出立体的空间感。这种效果常常通过CSS3的`transform`属性实现,尤其是`rotateX`、`rotateY...

    Cesium 实现动态立体墙效果;可以直接复制代码到 cesium sandcastle 中运行查看效果;

    在本文中,我们将深入探讨如何使用Cesium库来实现动态立体墙效果。Cesium是一个强大的开源JavaScript库,专为在Web浏览器中展示3D地球模型和地理空间数据而设计。它利用 WebGL 技术,提供了丰富的图形渲染功能,使得...

    JS 实现3D立体效果的首页轮播图

    在3D立体轮播图中,每张图片会被放置在一个虚拟的3D空间里,通过改变这个空间的视角,可以实现类似翻页或旋转的过渡效果。 实现3D立体轮播图的过程大致分为以下几个步骤: 1. **HTML结构**:首先,创建一个包含...

    JQuery带立体旋转效果图的焦点图代码

    在本文中,我们将深入探讨如何使用JQuery实现一个带立体旋转效果的焦点图代码,这是一种增强网站用户体验的流行方法。这种特效通常用于展示一组图片或内容,以吸引用户的注意力并引导他们浏览更多相关信息。 首先,...

    CSS3鼠标滑过3D立体翻转特效.zip

    在3D翻转特效中,主要应用了`transform: rotateX()`和`rotateY()`两个函数,它们分别沿着X轴和Y轴旋转元素,从而实现立体翻转效果。配合`perspective`属性设置观察者的距离,可以增加立体感。 此外,`transition`...

    Html5+CSS3实现3D旋转效果

    通过熟练掌握`rotate3d`、`perspective`以及JavaScript的动态更新,我们可以创建出富有动感和立体感的3D旋转效果。在实际项目中,这样的技术可以用于制作交互式3D产品展示、游戏、数据可视化等多种应用场景,极大地...

    jquery实现360度立方体3D旋转效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个360度立方体3D旋转的效果。这个效果通常用于产品展示,使用户可以从各个角度查看物体,增强了交互性和视觉吸引力。以下是一些关键知识点: 1. **jQuery库**:...

    CSS3图片3D立体翻转效果.zip

    "CSS3图片3D立体翻转效果"是利用这一特性创建的一种动态视觉效果,它使得网页元素,如图片,能够呈现出立体的翻转动画,给用户带来生动且交互式的体验。这种效果常被应用于个人网站,用于展示个人相册,增添网站的...

    数字翻转效果 类似翻日历

    CSS则负责样式设计,使数字元素具有立体感和翻转动画效果。例如,可以通过设置`transform`属性来实现元素的翻转,`transition`属性可以添加平滑的过渡效果。此外,CSS3的伪类如`:hover`或`:active`可以触发特定状态...

    轻量级CSS3立体式3D旋转动画效果.zip

    这是一个关键的CSS3属性,它告诉浏览器在3D空间内保留子元素的3D结构,使得子元素也能参与3D旋转,从而实现立体翻转。 再者,`backface-visibility`属性也是实现3D旋转的重要一环。默认情况下,翻转后的背面是不...

    js实现立体球面标签效果

    在JavaScript编程领域,实现立体球面标签效果是一种高级的视觉设计技术,它可以为网页或应用程序增添独特的交互体验。本文将深入探讨如何利用JavaScript来创建这种效果,并分享相关的知识和技术。 首先,我们需要...

    jQuery实现图片立体旋转切换效果特效源码.zip

    本资源“jQuery实现图片立体旋转切换效果特效源码.zip”显然是一个包含示例代码的压缩包,旨在展示如何使用jQuery创建一种立体旋转的图片切换效果。这种效果通常用于网站的轮播图或者产品展示,可以增强用户体验,...

    css3立体旋转菜单.zip

    本篇文章将详细介绍如何利用CSS3实现一个立体旋转菜单,通过实例解析其关键技术和应用。 首先,我们需要了解CSS3中的关键属性。在CSS3中,`transform`属性是实现3D转换的核心,它可以用于旋转、缩放、平移和倾斜...

Global site tag (gtag.js) - Google Analytics