页面的渐变效果

最新推荐文章于 2024-07-11 11:24:40 发布
最新推荐文章于 2024-07-11 11:24:40 发布
阅读量714 收藏
点赞数
文章标签： image transition filter class div vbscript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kennymoni/article/details/780963
版权

<HTML>
<HEAD>
<TITLE>NEWS</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>
.div {
 FILTER: revealTrans(transition=4,duration=2);
 LEFT: 0px;
 WIDTH: 217px;
 POSITION: absolute;
 TOP: -5px;
 height: 207;
}
</STYLE>
<BODY οnlοad=playPage()>
<DIV class=div id=page1 οnmοuseοver=setbFlag(false) style="VISIBILITY: visible" οnmοuseοut=setbFlag(true)>
  <DIV class=clsImgList style="padding-top:5px;">
  产品<br/>
  产品<br/>
  产品<br/>
  产品<br/>
  产品<br/>
 </DIV>  
 <DIV class=clsImgList style="padding-top:1px;">
  设备<br/>
  设备<br/>
  设备<br/>
  设备<br/>
  设备<br/>
 </DIV> 
</DIV>

<DIV class=div id=page2 οnmοuseοver=setbFlag(false) style="VISIBILITY: hidden" οnmοuseοut=setbFlag(true)> 
 <DIV class=clsImgList style="padding-top:5px;">
  材料<br/>
  材料<br/>
  材料<br/>
  材料<br/>
  材料<br/>
 </DIV>
 <DIV class=clsImgList style="padding-top:1px;">
  辅材<br/>
  辅材<br/>
  辅材<br/>
  辅材<br/>
  辅材<br/>
 </DIV>
</DIV>
<SCRIPT language=javascript>
<!--
 var tmpDiv1 = document.getElementById("page1");
 var tmpDiv2 = document.getElementById("page2");
 var bFlag = true;
 var bShowDiv = 1;
 function playPage()
 {
  if(bFlag)
  {
   if(bShowDiv == 1)
   {
    nextPage(tmpDiv1, true);
    nextPage(tmpDiv2, false);
   }
   else
   {
    nextPage(tmpDiv1, false);
    nextPage(tmpDiv2, true);

   }
   setTimeout('playPage()',4000);
  }
  else
  {
   setTimeout('playPage()',1000);
  }
  if(bShowDiv >0) bShowDiv--;
  else bShowDiv=1;
  return;
 }
 function setbFlag(b)
 {
  bFlag = b;
  return;
 }
 function nextPage(whichDiv, bShowDiv){
  if(whichDiv != null)
  {
   whichDiv.filters.revealTrans.apply();
    if(bShowDiv)
    {
     whichDiv.style.visibility = 'visible';
    }
    else
    {
     whichDiv.style.visibility = 'hidden';
    }
   whichDiv.filters.revealTrans.play();
  }
  return;
 }
//-->
</SCRIPT>
</BODY>
</HTML>

 

－－－－－－－－－－－－－－

另外一个例子：

<SCRIPT language=vbscript event=onLoad for=window>
 image1.filters.item(0).apply()
 image1.filters.item(0).transition = 10
 image1.Style.visibility = ""
 image1.filters(0).play(2.0)
 image2.filters.item(0).apply()
 image2.filters.item(0).transition = 11
 image2.Style.visibility = ""
 image2.filters(0).play(2.0)
 image3.filters.item(0).apply()
 image3.filters.item(0).transition = 12
 image3.Style.visibility = ""
 image3.filters(0).play(2.0)
</SCRIPT>

<img src="circul-side.gif" width="120" height="90" name="image1" style="FILTER: revealTrans(Duration=4.0, Transition=23); VISIBILITY: hidden">　　<img src="ps-logo.jpg" width="120" height="90" name="image2" style="FILTER: revealTrans(Duration=4.0, Transition=22); VISIBILITY: hidden">　　<img src="kpt7.jpg" width="120" height="90" name="image3" style="FILTER: revealTrans(Duration=4.0, Transition=23); VISIBILITY: hidden">


kennymoni
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML渐变效果：线性渐变与径向渐变详解
a451319296的博客
07-22 1814
这篇教程详细介绍了在HTML中创建渐变效果的方法。通过使用CSS的线性渐变和径向渐变属性，可以为元素添加漂亮的背景样式。线性渐变可以通过角度或方向关键词定义颜色的过渡方式，并支持多个颜色的渐变。径向渐变则通过从一个圆心向外辐射应用颜色的渐变效果。此外，还提到了其他渐变属性的使用，如调整渐变尺寸、起始位置、重复方式和混合模式等。掌握这些知识后，你可以为网页设计添加各种酷炫的渐变效果，让页面更加吸引人。希望本教程能够帮助你理解HTML中的渐变，并激发你在实践中创造出独特的视觉效果。
一个DIV，如何设置多个背景色(可能是图片，可能是渐变，可能是图片与渐变的混合)...
rainbow702的博客
06-08 1672
最近在做一个页面，有这么一个需求：页面中有一个 按钮，要求这个按钮既有一张背景图，同时它的背景又要有渐变的效果。 换作以前，肯定想都不想，直接用两个DIV去实现：一个用来实现渐变，另一个用来指定背景，再通过float或者定位来实现想要的效果。 但是这次，我就在想能不能只用一个DIV就可以实现了。百度了一下，在知乎上发现了这个帖子： http://www.zhihu.com/question...
Android实现页面渐变效果
是阿超
05-01 2669
Android实现页面渐变效果
css div颜色渐变效果
qq_44848723的博客
09-30 1392
文字透明度随div透明度渐变 单独给一个div设置渐变的透明度不能达成上面的效果，字的颜色不会随着透明度一起渐变，解决方法是加一个和背景颜色一样，透明度渐变的遮罩层，类似于新加一层涂料把原来的盖住的感觉，第一张图的横向渐变的遮罩层代码如下，渐变的坐标可以通过改变宽度，改变linear-gradiant的节点位置来实现 .bg-transparent{ position: absolute; height: 15px; width: 180px; right
使用 CSS 实现渐变效果
前端开发
07-11 535
使用 CSS 实现渐变效果
滑动页面渐变title效果
weixin_40520422的博客
01-24 412
仿胖虎奢侈品签到页面滑动效果 示例图：          下载链接：https://download.csdn.net/download/weixin_40520422/10934702
Flutter背景渐变效果
wxx314165038的博客
10-14 3393
代码如下： Widget main(){ return Container( height: 100.0, width: double.infinity, child: new Text("data"), decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.topCenter, end: Alignment.bottomCenter,
html颜色怎么渐变效果,html怎么设置颜色渐变
weixin_39727706的博客
06-04 7552
html设置颜色渐变的方法：首先创建一个HTML示例文件；然后使用div标签创建一个模块；接着在css标签内通过“id(colorchange)”来设置div样式；最后通过linear-gradient属性设置div的背景颜色渐变效果即可。本文操作环境：Windows7系统、Dell G3电脑、HTML5&&CSS3版。新建一个html文件，命名为test.html，用于讲解css...
【css】渐变效果
weixin_55639808的博客
01-15 4242
*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右上角*//*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置*//*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中显示*/注意：自定义径向大小时，不能自定义形状。
html 页面过度效果,HTML页面过渡效果大全
weixin_39792519的博客
06-03 1717
试了下没效果。。先存着。-------------------------------------------------------------------------------------------------------------------------------大家经常在网站上看到一些很不错的特效,其实马上想到的就是 Javascript 或是 Flash ...没错...但通过写...
js实现同一个页面多个渐变效果的方法
10-24
页面上的渐变效果可以由CSS3中的`transition`属性或JavaScript来实现。本文将重点介绍使用JavaScript来实现渐变效果的方法，这在一些老旧的浏览器中尤其有用，因为它们可能不支持CSS3的`transition`属性。 首先，...
颜色渐变效果
01-19
颜色渐变效果是通过不同颜色的过渡和混合来实现视觉上的平滑变化，是图形界面设计中常见的一种视觉效果。在网页设计、软件界面、图像处理等众多领域中，颜色渐变都扮演着重要的角色，它能够增强用户的视觉体验，使得...
JavaScript 渐变效果页面图片控制第1/2页
10-30
### JavaScript 渐变效果页面图片控制知识点梳理 #### 一、JavaScript 渐变效果概念 JavaScript 渐变效果是指利用JavaScript脚本来实现对象属性（如元素的宽度、高度、透明度、位置等）在一段时间内平滑变化的效果...
Carpaccio空间页面滑动渐变收缩回到状态栏效果.rar
07-30
标题中的"Carpaccio空间页面滑动渐变收缩回到状态栏效果"是一个Android UI特效，它涉及到Android开发中的视图动画和布局管理。这个效果通常会在用户滑动页面时，应用顶部的状态栏（包含时间、网络信号等信息）会渐变...
网页背景渐变效果代码
12-11
下面是我从网上搜索下来的关于网页的背景色从上下到由蓝色到白色的渐变的代码，但其中的一些参数我不懂，我琢磨不透如果要由下至上的渐变效果到底是修改哪个参数，我试过修改gradientType的值，但没能实现从下到上的...
数据结构试题参考及答案.doc
08-29
内容概要：本资源提供了一份详尽的数据结构试题参考及答案，覆盖了从基础概念到复杂算法的多个层面。读者可以通过这份材料，系统地学习和复习数据结构的理论知识和应用实践，包括但不限于时间复杂度分析、线性表操作、树与图的遍历、排序算法等。 适合人群：适合计算机科学与技术专业的学生、准备数据结构考试或面试的研发人员，以及任何希望提升数据结构和算法知识的编程爱好者。 能学到什么： 1. 如何分析和计算算法的时间复杂度，掌握不同算法性能评估的方法。 2. 线性表的存储结构，包括顺序表和链表的特点及其操作实现。 3. 图和树的遍历算法，理解深度优先搜索和广度优先搜索的应用场景。 4. 排序算法的原理和实现，包括快速排序、归并排序等。 5. 哈希表的设计与冲突解决策略，理解哈希函数的重要性。 6. 递归算法和非递归算法的设计思想，学习如何选择合适的算法实现。 阅读建议：此资源不仅包含了数据结构的基础知识点，还提供了丰富的例题和解答，适合读者进行自我测试和深化理解。在学习过程中，建议结合实际编程实践，将理论知识应用到具体的算法实现中。同时，鼓励读者在理解的基础上，自行推导和验证答案，以加深记忆和理解。
有住网（装修小程序源码）.zip
08-29
有住网（装修小程序源码）.zip
d3dcsx_46.dll
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
汇编语言I/O专题教程.ppt
最新发布
08-29
资源描述： 内容概要：《汇编语言》资源是一本深入浅出介绍汇编编程语言的教程，覆盖了从基础语法到高级程序设计技巧的全方位知识。通过本教程，读者将学习到汇编语言的基本概念、输入输出程序设计、中断处理、以及如何利用汇编语言直接控制硬件等核心内容。 适合人群：本资源适合对计算机底层工作原理感兴趣的学习者，包括计算机科学专业的学生、嵌入式系统开发者、硬件工程师以及任何希望深入理解计算机系统工作的编程爱好者。 能学到什么： 1. 汇编语言的基础知识，包括指令集、寄存器使用、内存管理等。 2. I/O设备的数据传送方式，如无条件传送、查询式传送和中断传送方式。 3. 程序直接控制I/O方式，包括I/O端口的使用、I/O指令的应用以及实际的I/O程序设计示例。 4. 中断传送方式的工作原理和实现，包括中断类型、中断向量表、中断处理过程和中断优先级管理。 5. 汇编语言在性能优化和硬件交互中的应用，以及如何编写高效的I/O程序。 6. 实际的汇编程序设计技巧，如发声程序、打印字符程序和中断处理程序的编写。 阅读建议：此资源不仅注重代码的编写实现，也强调对汇编语言程序设计背后的原理和硬件操作的理解
uniapp页面导航栏渐变
03-30
要实现uniapp页面导航栏的渐变效果，可以使用uni-app提供的导航栏插件uni-nav-bar，并结合CSS3的渐变效果来实现。 1. 首先在页面的json文件中引入导航栏插件： ``` { "usingComponents": { "uni-nav-bar": "/...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值