`
bicashy
  • 浏览: 159601 次
社区版块
存档分类
最新评论

翻页过渡效果

阅读更多
实现网页转换特殊过渡效果

当我们点击网页上的链接时,浏览器页面就会转到链接指向的新的页面,我们想在页面转换时加上过渡效果。

打开页面的源代码,在<head>与</head>之间插入代码:

<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=23)">


http-equiv="Page-Exit"的意思是指页面离开时产生效果。
Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下表
0 盒状收缩
1 盒状放射
2 圆形收缩
3 圆形放射
4 由下往上
5 由上往下
6 从左至右
7 从右至左
8 垂直百叶窗
9 水平百叶窗
10 水平格状百叶窗
11垂直格状百叶窗
12 随意溶解
13从左右两端向中间展开
14从中间向左右两端展开
15从上下两端向中间展开
16从中间向上下两端展开
17 从右上角向左下角展开
18 从右下角向左上角展开
19 从左上角向右下角展开
20 从左下角向右上角展开
21 水平线状展开
22 垂直线状展开
23 随机产生一种过渡方式

好了,现在大家自己测试一下效果吧。

另外也可以用下面的代码:
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
blendTrans是动态滤镜的一种,产生渐隐效果


分享到:
评论

相关推荐

    flash as3翻页过渡效果

    纯代码翻页过场效果,需要flash cs5打开。 自备Tweener包,网上很多,谢谢

    实现在程序界面之间翻页过渡效果

    在iOS开发中,实现程序界面之间的翻页过渡效果是一种常见的用户界面设计,它能为用户提供流畅且直观的交互体验。这种效果通常通过自定义转场动画或者利用系统提供的UIPageViewController来实现。以下是对这个"实现在...

    android实现电子书翻页效果完整源码

    这个项目可能使用了Property Animation,因为它能更方便地控制视图属性的变化,实现平滑的翻页过渡效果。 4. **触摸事件处理**: 为了响应用户的翻页手势,需要监听和处理MotionEvent,包括ACTION_DOWN、ACTION_...

    js超酷翻页脚本大汇集

    1. 动画过渡:使用CSS3动画或JavaScript库如GSAP(GreenSock Animation Platform)实现平滑的翻页过渡效果。 2. 个性化设计:通过调整按钮样式、添加翻页指示器(如小圆点)等,打造独特的翻页视觉体验。 3. 响应式...

    IOS应用源码之【框架】目前为止最为接近iBook的翻页效果(超酷).rar

    UIPageViewController提供了一些内置的翻页过渡效果,但可能无法满足本例中“超酷”的需求,因此开发者可能选择自定义过渡动画。 5. 自定义转场动画:如果UIKit的默认转场效果不能满足需求,开发者可以自定义一个...

    jQuery智能炫酷的翻页相册.zip

    此外,jQuery的动画API也使得平滑的翻页过渡效果得以实现。 CSS在本项目中起到了关键的美化作用。CSS3的新特性如transform、transition和animation被充分利用,以创建动态的3D翻页效果。开发者可能定义了相册页面的...

    jquery带翻页动画的电子杂志.zip

    2. CSS3动画:可能结合jQuery实现,用于创建平滑的翻页过渡效果。 3. 数据绑定:将内容动态加载到电子书页面,可能通过Ajax请求获取远程数据。 4. 响应式设计:确保电子杂志在不同设备和屏幕尺寸上都能正常显示和...

    jQuery版页面无刷新翻页插件.zip

    在这个插件中,可能会利用jQuery的fadeIn()、fadeOut()或slideToggle()等方法来创建平滑的翻页过渡效果,提升用户体验。 **jQuery插件** jQuery插件是jQuery生态系统的重要组成部分,它们扩展了jQuery的基本功能。...

    jQuery和CSS3带过渡效果的全屏垂直翻页特效插件

    FSVS(Full Screen Vertical Scroller)是一款jQuery和CSS3带过渡效果的全屏垂直翻页特效插件。该全屏翻页插件在页面上下滚动时一次翻一屏,并带有CSS3过渡动画效果。

    jquery移动端/pc端纵向翻页,上下滑动代码示例

    HTML文件通常包含页面结构和jQuery脚本,CSS文件用于设置页面样式和翻页过渡效果。通过查看和分析这些文件,你可以更具体地了解实现这个功能的细节。 总结来说,利用jQuery实现移动端和PC端的纵向翻页与上下滑动,...

    html+css翻页动画效果

    /* 添加过渡效果 */ } .page.flipped { transform: rotateY(180deg); /* 翻转180度 */ } ``` 这里,`perspective`属性设置了观察者距离元素的虚拟距离,影响3D效果的深度感;`transition`属性定义了变换的过渡...

    jquery实现的无刷新全屏翻页广告带返回顶部按钮效果源码.zip

    4. 动画效果,如平滑滚动和翻页过渡效果。 5. 可能还有状态管理,确保正确处理页面导航和历史记录。 要理解并使用这个源码,你需要具备基本的HTML、CSS和JavaScript知识,特别是jQuery库的使用。你可以通过阅读...

    IOS应用源码之翻页(电子书?) .rar

    Core Animation支持图层(CALayer)的动画,可以轻松实现平滑的翻页过渡效果。这通常包括两个部分:一个是从当前页面淡出,另一个是从下一页淡入。 5. **数据管理**:电子书中每一页的内容通常需要存储和管理。这...

    html5 图书翻页效果

    CSS3方法利用了3D变换和过渡效果来创建翻页动画,这种方法对硬件加速支持较好,但在复杂度和自定义程度上可能有限。而Canvas则提供了更大的灵活性,可以完全定制翻页的细节,如纸张的质感、折角效果等,但可能需要更...

    微信小程序开发纸质翻页效果源码-小程序翻页效果 uniapp实现

    2. **过渡效果**:通过`transition`属性,定义元素在改变状态时的过渡动画时间,使翻页动作看起来更加平滑。 3. **页面分层**:将每一页视为一个独立的元素,通过定位和z-index控制页面的前后关系,确保翻页时正确...

    Android翻页效果实现技术分享.pdf

    贝赛尔曲线是一种参数化的曲线,广泛应用于图形设计和计算机图形学中,能够创造出平滑且富有弹性的过渡效果。 - 贝赛尔曲线的绘制,首先需要确定四个关键点:起始点、两个控制点和结束点。 - 在Android开发中,可以...

    jquery插件turn.js

    gradients: true // 开启翻页过渡效果 }); }); ``` Turn.js支持多种翻页方式,包括水平和垂直翻页,以及从左到右或从右到左的翻转方向。此外,它还提供了事件监听器,可以捕获用户翻页时的各种交互行为,如开始...

    wpf仿iphone桌面翻页效果

    1. **动画系统**:WPF的动画系统允许开发者创建复杂的视觉效果,如平滑的过渡和翻页动画。我们可以使用`Storyboard`和`DoubleAnimation`类来定义动画的开始、结束值和持续时间。例如,通过改变UI元素的位置,我们...

    Qt 翻页效果实现~

    翻页(Folding)效果在用户界面设计中十分常见,例如在动画过渡、模拟纸质书籍翻页等场景中广泛应用。翻页效果不仅能增强用户体验,还能提升应用程序的视觉吸引力。 #### 实现翻页效果的方法 实现翻页效果的方法...

Global site tag (gtag.js) - Google Analytics