`
zhengshuangxi1226
  • 浏览: 50454 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

层切换效果

阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>收藏</title>
</head>
<body   onload="dotransition()">


   <script LANGUAGE="JavaScript1.1">
var i_messages = 0
var timer
var tc=1;
var i;

function randomposition(range) { 
return Math.floor(range*Math.random())
}

function dotransition() {
    if (document.all) {
       tc++;
    if (tc>3) tc=1;
     i_messages=Math.floor(22*Math.random())
        content.filters[i_messages].apply()
   for (i=1;i<=3;i++) document.getElementById("div_"+i).style.display="none";
   document.getElementById("div_"+tc).style.display="";
        content.filters[i_messages].play()
    }
    timer = setTimeout("dotransition()",10000)  
}

</script>
<DIV id=content style="position: absolute; top:100px; left:10px; width:560px; height:200px; text-align:center; filter: revealTrans(Transition=1, Duration=3) revealTrans(Transition=2, Duration=3) revealTrans(Transition=3, Duration=2) revealTrans(Transition=4, Duration=2) revealTrans(Transition=5, Duration=1) revealTrans(Transition=6, Duration=3) revealTrans(Transition=7, Duration=2) revealTrans(Transition=8, Duration=1) revealTrans(Transition=9, Duration=3) revealTrans(Transition=10, Duration=1) revealTrans(Transition=11, Duration=2) revealTrans(Transition=12, Duration=3) revealTrans(Transition=13, Duration=1) revealTrans(Transition=14, Duration=2) revealTrans(Transition=15, Duration=3) revealTrans(Transition=16 Duration=1) revealTrans(Transition=17, Duration=2) revealTrans(Transition=18, Duration=3) revealTrans(Transition=19, Duration=1) revealTrans(Transition=20, Duration=2) revealTrans(Transition=21, Duration=3) revealTrans(Transition=22, Duration=3)">
<div id="div_1" style="border:2px solid #FF0000; background-color:#0099FF; width:200px; height:200px;">
one
</div>
<div id="div_2" style="border:2px solid #00FF00; background-color:#00FF99; width:200px; height:200px; display:none;">
two
</div>
<div id="div_3" style="border:2px solid #0000FF; background-color:#FF0099; width:200px; height:200px; display:none;">
three
</div>
</DIV>


</body>
</html>
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    flash 实现图片3d层叠切换效果

    标题 "Flash实现图片3D层叠切换效果" 暗示了我们将会探讨如何使用Adobe Flash软件创建一种视觉效果,让图片在3D空间中以层叠的方式进行切换。这通常涉及到ActionScript编程,它是Flash平台的核心语言,用于实现动态...

    html5实现3D页面层叠切换效果.zip

    在3D页面层叠切换效果中,CSS3的translate3d()、rotateX()、rotateY()等函数会被用到,以创建出立体空间中的元素移动和旋转效果。 3. **JavaScript事件处理**:当用户点击索引按钮时,JavaScript会捕获这个事件并...

    jquery实现的图片倾斜层叠切换效果源码.zip

    该压缩包文件“jquery实现的图片倾斜层叠切换效果源码.zip”主要包含了一个使用jQuery库实现的图片倾斜层叠切换效果的代码示例。在网页设计和开发中,这样的功能可以为用户带来动态且富有视觉吸引力的图像展示体验。...

    网页层切换效果_TAB效果大全

    网页层切换效果_TAB效果大全,利用javascript和css让页面的tab进行切换包括鼠标经过,点击等

    javascript实现的多个层切换效果通用函数实例

    JavaScript实现的多个层切换效果通用函数的原理和应用 在现代网页设计中,层切换效果是常见的交云动态效果之一。它通过程序控制页面中不同层(或称为div)的显示与隐藏,使得用户可以更加直观地与页面内容互动。在...

    简单的jquery层叠图片滚动轮播切换效果代码,带按钮的滚动轮播图

    这里我们讨论的是一个基于jQuery实现的简单图片滚动轮播切换效果,带有控制按钮,使得用户能够自由地浏览和切换图片。这个轮播图方案特别适合那些希望在网站上动态展示产品或服务的页面。 首先,`index.html`是网页...

    html5实现3D页面层叠切换效果特效代码

    在实际应用中,这样的3D层叠切换效果不仅可以用于导航菜单,也可以用于产品展示、图片滑块等多种场景,为用户带来更为生动和沉浸式的浏览体验。开发者需要熟悉HTML5的语义化标签、CSS3的3D转换以及JavaScript的事件...

    js弹出层 城市切换效果

    在“js弹出层城市切换效果”这个主题中,我们将深入探讨如何利用JavaScript技术创建一个弹出的城市选择窗口,并实现平滑的城市切换效果。 首先,弹出层通常指的是在网页上动态显示或隐藏的元素,如模态框、提示框或...

    ios-卡片式切换效果.zip

    github地址:... 轻松集成卡片式切换效果,本Demo仿支付宝五福效果,由于图片资源比较大,cocoachina限制工程大小小于5M,所以DEMO中无图片资源,需要查看完整工程请github下载.

    20行JS代码实现图片切换效果

    "层切换效果"可能指的是利用CSS的`z-index`属性来控制图片的层级,从而实现图片的切换。这种方式可以让切换过程更加平滑,有深度感。 总的来说,20行代码实现的图片切换效果展示了JavaScript的灵活性和实用性。...

    图片切换效果多层

    在IT领域,图片切换效果是用户体验设计中的一个重要组成部分,尤其在网页、移动应用以及多媒体展示中广泛应用。"图片切换效果多层"这个概念通常指的是通过多层次的动态转换来展示一系列图片,以提升视觉吸引力和交互...

    gsap.js图片层叠切换代码.zip

    在本项目中,"gsap.js图片层叠切换代码.zip"是一个包含JavaScript和CSS特效的压缩包,主要用于实现网页上的图片层叠切换效果。这个效果是网页设计中一种常见的动态展示方式,它能够吸引用户的注意力并提升用户体验。...

    jquery图片倾斜层叠切换代码.zip

    在创建图片切换效果时,可以使用这些标签为图片添加描述或者定义其在页面中的位置。 JavaScript是实现动态效果的关键,它与jQuery一起工作,处理用户的交互和动画逻辑。例如,当用户点击一个按钮时,JavaScript会...

    jQuery洗牌式图片层叠切换.zip

    在本文中,我们将深入探讨如何使用jQuery实现一种独特的洗牌式图片层叠切换效果,这是一种在网页设计中常用于创建动态、吸引用户注意力的交互式元素。这种效果结合了前端技术,包括CSS、JavaScript(主要依赖jQuery...

    jQuery实现洗牌式图片旋转层叠切换特效源码.zip

    【描述】中的信息与标题一致,再次确认了这是一个基于jQuery的代码实现,主要功能是实现一种洗牌式的图片旋转和层叠切换效果。这个特效可能包含多个动画序列,通过JavaScript的控制,使得图片在切换时呈现出立体和...

    iOS 页面切换效果

    在iOS应用开发中,页面切换效果是提升用户体验的重要一环,它可以给用户带来更直观、更生动的操作感受。本文将详细探讨标题所提及的“iOS页面切换效果”,以及描述中提到的16种不同的动画类型,包括淡入淡出、飞入飞...

Global site tag (gtag.js) - Google Analytics