CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们预备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。
实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接地址。
制作方法：
1、在<head>中插入JS代码：
<SCRIPT language=JavaScript1.2>
function reapply(){
setTimeout("slideit()",800)
return true
}
window.onerror=reapply
</SCRIPT>
<SCRIPT language=JavaScript1.1>
<!--
//preload images
var image1=new Image()
image1.src=图片地址"
var image2=new Image()
image2.src=图片地址"
var image3=new Image()
image3.src=图片地址"
var image4=new Image()
image4.src=图片地址"
var image5=new Image()
image5.src=图片地址"
var image6=new Image()
image6.src=图片地址"
var image7=new Image()
image7.src=图片地址"
var image8=new Image()
image8.src=图片地址"
var image9=new Image()
image9.src=图片地址"
//-->
</SCRIPT>
其中：images/图片地址为显示图片的路径，可按实际情况修改。
2、在<body>中插入代码：onload=slideit()
3、在页面中插入图片。
并在图片<img>中插入：style="FILTER: revealTrans(Duration=2, Transition=23)"，并命名为：name=slide
完整代码：<img src=连接地址"images/图片地址" width="120" height="90" border="0" style="FILTER: revealTrans(Duration=2, Transition=23)" name=slide>
4、给图片加超链接：<a href="JavaScript:slidelink()">
5、加入代码：
<SCRIPT>
<!--
////change number of images below
var number_of_images=9
//change speed below (in seconds)
var speed=3
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
if (document.all)
slide.filters.item(0).Apply()
document.images.slide.src=eval("image" step ".src")
if (document.all)
slide.filters.item(0).Play()
whichimage=step
if (step<number_of_images)
step
else
step=1
if (document.all)
setTimeout("slideit()",speed*1000 3000)
else
setTimeout("slideit()",speed*1000)
}
function slidelink(){
if (whichimage==1)
top.location.href=图片地址"/index.HTML"
if (whichimage==2)
top.location.href=图片地址"/news.HTML"
if (whichimage==3)
top.location.href=图片地址"/game.HTML"
if (whichimage==4)
top.location.href=图片地址"/music.HTML"
if (whichimage==5)
top.location.href=图片地址"/sport.HTML"
if (whichimage==6)
top.location.href=图片地址"/radio.HTML"
if (whichimage==7)
top.location.href=图片地址"/travel.HTML"
if (whichimage==8)
top.location.href=图片地址"/card.JSP"
else if (whichimage==9)
top.location.href=图片地址"/study.HTML"
}
</SCRIPT>
其中：各链接地址相对应<head>中插入的JS代码中的图片。
注重，页面地址必须与图片张数相对应。
分享到：
相关推荐
需要注意的是，尽管RevealTrans滤镜在早期的网页设计中广泛使用，但随着CSS3的普及，现代浏览器更多地支持CSS3的`transition`和`animation`属性，它们提供了更强大、更灵活的动画效果，并且具有更好的浏览器兼容性。...
CSS中有revealTrans滤镜在网页中制作特效非常有用处。这次，我们准备介绍另一种使用revealTrans滤镜制作出超弦图片播放的效果。 实现思路：使用revealTrans滤镜制作出超弦图片播放的效果，并每张图片有各自的链接...
在Dreamweaver中，CSS滤镜是一种强大的工具，允许开发者为网页元素添加各种视觉效果，如透明度、模糊、阴影、翻转等。通过CSS滤镜，你可以增强网页的视觉吸引力，创造出各种独特的视觉体验。以下是一些主要的CSS滤镜...
在这个文档中，我们将深入探讨如何利用RevealTrans滤镜来制作文字切换效果。 首先，理解RevealTrans滤镜。这是一个用于HTML元素的CSS滤镜，它可以创建各种过渡效果，如滑动、溶解等，使得元素在页面上的显示方式...
实现图片切换类似幻灯片效果, 一共23种切换效果, 代码十分简单明了, 没有多余的干扰代码, 看后马上就能明白怎样使用动态滤镜. 测试环境: Window XP professional sp3, IE 6.0
在JavaScript中，这可以通过修改HTML5 Canvas上的像素数据或者利用CSS3滤镜来实现。RevealTrans可能是为DOM元素提供这种滤镜转换的一种工具。 在Web开发中，图形特效是不可或缺的一部分，它们能够提升网站的互动性...
在网页设计中，通过JavaScript和CSS滤镜技术结合使用可以为用户带来更加丰富的视觉体验。本篇文章将详细介绍如何利用这些技术实现一个简单但有趣的图片滤镜切换功能。 #### 核心概念解析 - **JavaScript**: 一种...
CSS 中的 Filter 样式大全及滤镜兼容问题 本文将详细介绍 CSS 中的 Filter 样式，包括 Filter 样式的定义、应用和种类，以及各种浏览器对 CSS 的支持问题。 一、Filter 样式的定义和应用 Filter 样式是 CSS 样式...
标题中的“CSS滤镜效果介绍”指的是CSS中的滤镜（Filter）特性，它允许开发者对网页元素应用视觉效果，如模糊、颜色调整等。描述中提到了CSS静态滤镜样式和动态滤镜，两者都是CSS滤镜的不同使用方式。 1. **CSS静态...
使用CSS的revealtrans滤镜可以制作出图片切换时的播放效果，它的书写格式是这样的：Filter:revealtrans(duration=转换的秒数,transition=转换的类型) 拓展练习： 1. 什么是脚本语言？ 脚本语言包含以下几点含义：...
CSS滤镜是现代Web设计中的一个重要工具，它能够让我们在不依赖图像处理软件的情况下直接在网页上对元素应用视觉效果。这不仅可以减少开发工作量，还能提高网站性能。CSS滤镜通过`filter`属性实现，该属性可以接受...
静态滤镜通过在CSS中直接应用filter属性来使用，它包括多种类型的效果，以下是一些主要的静态滤镜效果及其参数说明： 1. Alpha：设置图片或文字的不透明度，包括开始的不透明度（Opacity）、结束的不透明度...
在本篇文章中，我们将详细探讨"滤镜使用方法"，包括`alpha`、`blur`、`chroma`、`dropshadow`、`revealtrans`和`shadow`等滤镜，以及它们在不同场景下的应用。 1. **Alpha滤镜**：Alpha滤镜通常与透明度或不透明度...
在早期的网页设计与开发过程中，Internet Explorer（简称IE）浏览器提供了丰富的内置网页过渡效果，这些特效为网站增添了动态感和交互性，使得用户在浏览网页时能获得更加丰富的视觉体验。其中，`...
在网页设计和开发中，`filters.revealTrans.Transition` 是一种旧的、基于滤镜（Filter）技术的动画效果，主要用于Internet Explorer浏览器。这种技术主要用于实现过渡效果，比如幻灯片展示。在标题和描述中提到的 `...
网页制作经典技巧涵盖了HTML语法、网页设计以及用户体验等多个方面，...以上技巧是网页制作中常见的优化和设计手法，它们能够提升网页的用户体验和视觉效果，尤其对初学者来说，掌握这些技巧能快速提升网页制作水平。