`

24种页面切换效果详解

IE 
阅读更多
24种页面切换效果详解
使用格式:
<meta http-equiv="Page-Enter" content="RevealTrans(duration=5,Transitionv=11)">
duration=时间
Transitionv=方式
Page-Enter

说明:duration为页面切换的时间长度,3.000表示3秒钟,一般可以直接输入3便可;transition为切换效果,从1-23共22种不同的切换效果,其中23为随机效果。


效果  Content  Transitionv 
盒状收缩 RevealTrans 0  
盒状展开  RevealTrans 1 
圆形收缩  RevealTrans 2  
圆形展开 RevealTrans 3 
向上擦除 RevealTrans 4 
向下擦除 RevealTrans 5 
向左擦除 RevealTrans 6 
向右擦除 RevealTrans 7 
垂直百页窗 RevealTrans 8 
水平百页窗 RevealTrans 9 
横向棋盘式 RevealTrans 10 
纵向棋盘式 RevealTrans 11 
溶解 RevealTrans 12 
左右向中部收缩 RevealTrans 13 
中部向左右展开 RevealTrans 14 
上下向中部收缩 RevealTrans 15 
中部向上下展开 RevealTrans 16 
阶梯状向左下展开 RevealTrans 17 
阶梯状向左上展开 RevealTrans 18 
阶梯状向右下展开 RevealTrans 19 
阶梯状向右上展开 RevealTrans 20 
随机水平线 RevealTrans 21 
随机垂直线 RevealTrans 22 
随机 RevealTrans 23
除了上面两个参数,还有一个http-equiv: 
http-equiv="Page-Exit"的意思是指页面离开时产生效果。 
它有一种写法,如: 
http-equiv="Page-Enter"则是指页面进入时产生的效果。


页面淡入淡出效果代码为:
<meta http-equiv="Page-Enter" content="blendTrans(duration=1)"/>
<meta http-equiv="Page-Exit" content="blendTrans(duration=1)"/>

http-equiv 标签说明:

meta   本组件卷标大多用来,描述那些与内容无关,但与档案本身有关的各种信息,但只能放于<Head>....<Head>内。 
http-equiv HTTP标头(Head)的名称,表示某些信息需要传给服务器。 
="Page-Enter"   网页进入时要展示的效果;
="Page-Exit"   网页脱离时要展示的效果。
content= Meta 信息的内容。
="revealTrans   转换Link标签的反向关联。
Duration=2.0   期间。
Transition=N   要展示的效果种类,N值详上表功能。
="refresh"   转换、更新或重整。
content="15   15秒后执行。
url=../choice.htm"   所指定要转换的网页路径及文件名。 
您若不加入第三段http-equiv=="refresh"语法,也可造成手动切换效果。
本网页切换特效限IE使用 

 

分享到:
评论
2 楼 guoshuai_27 2016-06-29  
1 楼 huangxilove 2011-09-22  
试了一下,效果很棒哦!

相关推荐

    jQuery全屏页面滚动导航切换效果

    **jQuery全屏页面滚动导航切换效果详解** 在网页设计中,全屏页面滚动导航是一种流行的交互方式,它能提供沉浸式的用户体验,使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果,可以提升网站的...

    jQuery的11种表格切换效果代码下载(滑动门代码)

    《jQuery实现表格切换效果详解与代码实践》 在网页设计中,动态的表格切换效果能够极大地提升用户体验,使用户能够更方便地浏览和交互数据。jQuery作为一款强大的JavaScript库,为开发者提供了丰富的功能来实现这样...

    css3+js可通过缩略图幻灯片导航的页面切换效果

    **CSS3+JavaScript 缩略图幻灯片导航页面切换效果详解** 在现代网页设计中,动态和交互性是提升用户体验的重要元素。本教程将深入探讨如何利用CSS3和JavaScript实现一种创新的页面切换效果——缩略图幻灯片导航。...

    五种切换效果的jQuery幻灯片.zip

    在"五种切换效果的jQuery幻灯片"项目中,开发者利用jQuery库和CSS3的强大功能,为用户提供了五种独特的视觉体验,包括爆炸效果、翻转效果、扭曲效果、立方体效果和翻页效果。 1. **爆炸效果**: 这种效果模拟了...

    12种炫酷CSS3图片切换过渡效果

    【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本,它引入了许多新特性,其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验,特别是在图片...

    jquery上下页面视差滚动切换效果

    **jQuery上下页面视差滚动切换效果详解** 在网页设计中,视差滚动是一种常见的特效,它使得背景元素相对于前景元素以不同的速度移动,营造出深度感和动态视觉体验。jQuery库因其丰富的功能和易用性,常被用来实现...

    Jquery超炫图片切换效果

    **jQuery超炫图片切换效果详解** 在Web开发中,动态且引人注目的图片展示是提升用户体验的关键元素之一。jQuery库以其简洁的API和强大的功能,成为实现这种效果的首选工具。本文将深入探讨如何利用jQuery创建一个...

    简单易用的jQuery页面切换动画效果.zip

    通常,一个简单的页面切换效果需要至少两个或更多的页面(或者说是页面容器)进行切换。这些页面可以是div元素,每个div包含不同的内容。 接着,我们需要引入jQuery库。在HTML文档的头部,添加如下代码以引入jQuery...

    jquery新浪微博图文列表滚动切换效果代码

    "jQuery 微博图文列表滚动切换效果"是常见的一种网页交互设计,它模拟了类似新浪微博的展示方式,通过滚动页面时,列表中的图片和文字内容自动平滑切换,为用户呈现丰富的信息流体验。 一、jQuery库的介绍 jQuery ...

    jQuerys首页图片切换效果

    **jQuery首页图片切换效果详解** 在网页设计中,动态的图片切换效果是常见的吸引用户注意力的设计手法,尤其在首页上,它可以提升网站的视觉吸引力和用户体验。本篇将深入讲解如何利用jQuery实现一种兼容性优秀且...

    jq滑动切换页面

    4. **JavaScript 代码**:编写 `jQuery` 代码来监听用户交互,如点击按钮,然后执行页面切换动画: ```javascript $(document).ready(function() { var $slider = $('#slider'); var $pages = $slider.children('...

    js实现百叶窗式幻灯片切换效果

    【标题】:JS实现百叶窗式幻灯片切换效果 在网页设计中,焦点图是一种常见的元素,用于展示多张图片或信息的轮播效果。"百叶窗式幻灯片切换"是一种独特且吸引用户的动画效果,它通过模拟百叶窗逐渐打开的过程来实现...

    100种不同图片切换效果插件pageSwitch-jquery-change-focus

    《100种不同图片切换效果插件PageSwitch-jquery-change-focus详解》 在网页设计中,图片切换效果是提升用户体验的重要元素之一。它能够使静态的图片展示变得生动有趣,吸引用户注意力,进而增强网站的互动性。...

    UINavigationController详解与使用(二)页面切换和segmentedController

    通过实现`UINavigationControllerDelegate`的`animationControllerForOperation:fromViewController:toViewController:`和`interactionControllerForAnimationController:`方法,为页面切换提供自定义的动画效果。...

    jQuery做的一个简单的图片切换效果

    **jQuery图片切换效果详解** jQuery库是JavaScript的一个强大扩展,它极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。在本项目中,我们将深入探讨如何使用jQuery实现一个简单的图片切换效果。这个效果通常...

    Flash Js焦点图切换效果.rar

    《Flash Js焦点图切换效果详解》 在网页设计与开发中,吸引用户注意力的一个常见手法是使用焦点图或幻灯图切换效果。这种效果能够动态展示多张图片或信息,提高用户体验并使得页面更具视觉吸引力。本文将深入探讨...

    jquery滑屏切换效果.zip

    《jQuery滑屏切换效果详解及实现》 在网页设计中,滑屏切换效果是一种常见的交互设计,它使得用户可以通过简单的手势或导航按钮在多个屏幕之间流畅地切换,从而提升用户体验。本篇将深入探讨jQuery实现滑屏切换效果...

    HTML页面过渡效果大全

    HTML页面过渡效果的引入,主要目的是为了平滑网页间的跳转过程,避免用户在浏览过程中感受到突兀的页面切换,从而提升整体的用户体验。通过精心设计的过渡效果,可以实现页面间更加流畅自然的转换,为用户营造出沉浸...

    jQuery 四色页面切换

    在网页设计中,页面切换效果是提升用户体验的重要手段,jQuery作为一款轻量级的JavaScript库,提供了丰富的API和插件来实现各种动态效果,其中包括四色页面切换。本教程将详细介绍如何使用jQuery实现四色页面切换...

    仿苹果官方网站焦点图切换效果

    【焦点图切换效果详解】 在网页设计中,焦点图(也称为轮播图或滑动图片展示)是一种常见的视觉元素,用于展示一组重要的图像或内容,通常以自动切换或用户手动控制的方式呈现。这种设计手法可以有效地利用有限的...

Global site tag (gtag.js) - Google Analytics