5 阅读 · 0 评论 · 0 收藏 · 2023-07-15 · 25930 字 · 87 分钟阅读
从现在开始，我将向您介绍一系列的CSS作品，这些大都是CSS与JavaScript结合起来产生的特效。您可以通过对这些特效的欣赏，进一步领略到CSS的强大功能。\r\n 1、动态改变样式\r\n 我们先来看一个较简单的特效，这里只是用到了属性和鼠标事件。 \r\n 请把鼠标移到蓝色背景的文字下面。 我们使用“class”类属性来改变文档的样式。 放大这段文本。\r\n 这个例子的代码是这样的：\r\n ...
从现在开始，我将向您介绍一系列的CSS作品，这些大都是CSS与JavaScript结合起来产生的特效。您可以通过对这些特效的欣赏，进一步领略到CSS的强大功能。
1、动态改变样式
我们先来看一个较简单的特效，这里只是用到了属性和鼠标事件。
请把鼠标移到蓝色背景的文字下面。
我们使用“class”类属性来改变文档的样式。 放大这段文本。
这个例子的代码是这样的：
change style
动态改变样式
请把鼠标移到蓝色背景的文字下面。
我们使用"class"类属性来改变文档的样式。
放大这段文本。
//定义鼠标触发事件，当鼠标放上去的时候，区域内以bigchange类的格式显示，
当鼠标离开的时候，以start类显示//
这个例子很简单，容易理解，就不多说什么了，下一节将向您介绍一个动态显示的例子。
2、动态可视化效果
这一节我们讲一个动态显示的例子，
。
实现这种显示/隐藏效果的代码如下：
dtksh
//定义一个类bobo// div id="sway" style="visibility:hidden;color:rgb(177,63,174);
position:absolute;top:20; width:190;height:100;
margin-top:5;margin-left:5;">
//定义一个类sway// Sports is wonderful!
<img src="ss07049.jpg" οnmοuseοver="caption()"
οnmοuseοut="caption()">
//导入一张图片//
请把您的鼠标移动到图片上，然后再把鼠标从图片上挪开。
下一节将向您介绍一个动态滤镜转换的例子。
3、动态滤镜显示
本节将向您介绍一个动态滤镜显示的例子中，在这个例子中您可以随意改变透明度的开始值、结束值和样式（style）。
。
这个例子先是在
中加入了一段JavaScript语句，代码如下：
这段代码定义图片的透明度等于表单中输入的对应的透明度的值。myimage是一个类
，标识图片。它的CSS样式是这样定义的：
最后，在图片下方加入三个表单，分别对应输入初始透明度、结束透明度和样式值
，通过透明度的改变，使隐藏在图片下的文字显示出来。
下一节将向您介绍一种特殊的滤镜效果。
4、Blentrans属性
本节介绍一种特效，它应用到的是CSS中的混合转换滤镜blendtrans。请您先看一下
下面这个例子：
滤镜效果
使用方法 请单击这里使文字淡出，再次单击后可以使文字逐渐出现。
我们为这段文字加上的逐渐淡出的多媒体效果。
看到了吗？这是一种淡入淡出的效果。让我们来看一下而这种效果用到的转换属性
blendtrans的语法：
Filter：BlendTrans（duration=淡入或淡出的时间，以秒作单位)
我们看到了BlendTrans属性只有一个属性值duration，它指定了对象淡入淡出的时
间。
上面的例子的源代码如下所示：
dhtml
滤镜效果
使用方法
请单击这里使文字淡出，
再次单击后可以使文字逐渐出现。
我们为这段文字加上的逐渐淡出的多媒体效果。
除了文字外，图片是不是也能实现这种混合效果呢？答案是肯定的。下一节将向您
介绍图片的混合转换滤镜效果和显示转换滤镜效果。
5、RevealTrans属性
上一节我们介绍了混合转换滤镜的一个例子，本节我们来看一下RevealTrans属性
，RevealTrans属性提供了更加多变的转换效果。它的书写格式是这样的：
Filter:revealtrans(duration=转换的秒数，transition=转换的类型）
表达式中的transition参数的参数值有24中，以代号0-23来表示，分别代表24中显
示类型，具体的参数值列表如下图所示：
下面的两个例子，一个是应用了上一节讲的blendtrans属性，一个是应用了本节所
说的revealtrans属性。
请点击下面的两幅图，看完效果后请点击IE的刷新按钮。
我们看到将revealtrans属性的transition参数值设置为23，为随机选取模式，显
示的是更为多变的效果。
下一节我将向您介绍一种发光特效。
6、动态Glow属性
还记得在教程中讲过的Glow滤镜属性吗？下面这个例子动态的把它演示出来。
请您点击下面的这段文字：
洪恩在线 求知无限
怎么样，是不是有一种燃烧起来的感觉，反复点击文字将不断的发光。实现这种效果是很简单的，代码如下：
css demo <div id="myimg" οnclick="zap()"
style="font-family:行书体;font-size:54;height:200;color:#ff9900;
filter:glow(color=#9999ff,strength=20,enabled=0)
blendtrans(duration=2)">
洪恩在线 求知无限
我们看到代码中还应用到了blendtrans属性，使您在点击后字体的变化有一种淡化
的效果。
从下一节开始，我将向您介绍一些利用CSS-P的知识做出来的特效例子。
7、显示和隐藏
我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏
显示- show 隐藏- hide
我们来看一下这个例子的源代码：
显示-show 隐蔽-hide //两个超链接调用javascript中的两个函数// //导入一张图片//
我们看到这段代码有一些不同于前面的例子的特点。其实CSS大部分动态的特效都是
DHTML的范畴。
也就是说，它们都是CSS与JavaScript结合起来实现的一种效果。另外，上面这个例
子还涉及到了IE和NS兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲
解。
8、浏览器的兼容问题
首先我们来了解一下什么是CSS-P。
CSS-P是Cascading Style Sheets Positioning的缩写。从字面上我们可以把它理
解成是用来控制任何元素在页面上或窗口上的位置的。而具体跟CSS-P有关的属性包括以
下这些：
Position、Left、Top、Height、Width、Clip、Visibility、Z-index、
Background-color、Layer-background-color、Background-image和Layer-
background-image等。
我们看到这些属性在前面的教程中都已经介绍过了，实际上就是CSS定位方面的知识
。
谁都知道最常用的两个浏览器是IE和NetScape。我们如何让和JavaScript结合起来
应用的CSS在两个浏览器下都能正常显示呢？
我们针对上一节的例子来讲解，它是这样实现兼容的问题的：
ns4 = (document.layers)? true:false
//document.layers是NetScape专用的，如果是这种形式，则为NS浏览器//
ie4 = (document.all)? true:false
//document.all是IE专用的，如果是以这种形式，则为IE浏览器//
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style }
//这里定义了一个函数，初始化对象block，在NS中，对CSS对象的表示方法是：
document.blockdiv.propertyname,这里blockdiv是您可以任意定义的名称。
在IE中， 表示方法是：blockdiv.style.propertyname。上面的代码是针对两
种浏览器用不同的格式定义对象block，从而确保了在两种浏览器下都能正常显示
。//
下面我们就来看一个CSS-P与JavaScript结合起来的例子，您可以试一试在两种浏
览器下是否都能正常显示。
下一节将向您介绍一个移动的例子。
9、移动
通过下面这个例子，您可以把图片移动到指定的地方。
实现这个例子的代码是这样的：
<body οnlοad="init()">
Check Values:
横向位置,
竖向位置
Visibility:
显示,
隐蔽
移动到 MoveTo:
(100,200),
(200,260),
(300,340)
相对移动 MoveBy:
(10,0),
(-10,0),
(0,10),
(0,-10)
//调用JavaScript中定义的函数//
//初始化一个区域的原始位置// 
下一节我将向您介绍一个滑动的例子。
10、滑动
上一节我们介绍了一个移动的例子，它可以使您随意放置对象的位置。那可不可以
让对象连续移动，从而实现一种动画的效果呢？我们来看个例子，
。
怎么样，是不是有一种动起来的感觉，实现这种效果的代码如下：
滑动 返回 //定义对象的绝对位置// //导入一张图片//
本节我们讲述了一个滑动的例子，下一节将向您介绍一种用键盘控制对象移动、滑
动的方法。
11、键盘控制对象
本节我们将讲一下键盘控制对象移动的例子。
在前面讲过的使对象移动的例子，如果能用键盘来控制，将会大大加强您和电脑之
间的交互性。那么键盘控制怎么实现呢？
这需要涉及到事件问题。也就是说需要有一个键盘控制事件来激发键盘按下和松开的状态。这里用到的是“keydown”事件，这个事件的书写格式是这样的：
document.onkeydow=keydown
上面语句中的keydown是一个子程序，也就是说当您的浏览器读到这个子程序时，它就会知道您按下了哪一个键，从而作出相应的反应。我们下面来看一个例子：
请按任意键
当您按下任意键时，弹出了一个窗口，告诉您按下的是哪一个键，并且告诉您该键的内码是多少。实现这种键盘控制的代码如下：
//
子程序//
请按任意键
上面的这个例子很简单是一个很简单的例子，
，在这里您可以看到键盘控制图片移动的例子，
您可以看到另外一种形式的移动。
好了，本节就讲到这里，下一节将向您介绍鼠标点击控制的例子。
12、鼠标控制
上一节我们讲了一个键盘控制的例子，本节我将向您介绍一个鼠标控制的例子。在
下面这个例子中，点击图片上方的超链接，图片就会移动。如果用鼠标一直按住链接不
放的话，图片就会持续移动下去。
实现这种效果的代码如下：
请您点击"移动"两个字，再一直按住鼠标左键看一看
<a href="javascript:void(null)"//不要换网页//
onMouseDown="block.active=true; slide(); return false;"
onMouseUp="block.active=false"
onMouseOut="block.active=false">移动
//设置鼠标的三种状态，当鼠标按下的时候，激活slide（）函数，开始滑动//
其实上面这段代码和键盘控制的代码很相象，只是多了一个超链接的控制。
好了，下一节我将向您介绍动态控制对象可视区域的例子，听起来是不是很拗口，
没关系，很有意思的。
13、Clip属性的应用
上一节说到了动态可视区的调整，实际上就是Clip属性的应用。
Clipping的中文解释就是剪辑的意思，这个属性决定了对象的哪个部位可以被看到。它不会改变任何对象的性质。
Clipping 的区域是一个矩形， 而这个矩形的尺寸取决于于四个边的位置。
这四个边用 top, right, botton, left 来表示。
请注意：这四个边的位置是相对于对象的而不是相对于窗口的。
Clip属性的书写格式是这样的：
Clip rect（top，right，bottom，left）
在这里，top，right，bottom，left的值都是以像素pixels为单位的。
为了更好的理解相对于对象这个含义
，我们看一个例子，比如左面是一幅
285×185的图片，我们对它加入下面这
段代码：
style="clip:rect(0,200,100,0)"
这段代码使图片将以200×100的形式显
示。这是因为rect中规定的200，代表了图片的右端距离是200pixels，也就 是图片的宽度是200pixels；同理， 100定义的则是图片的高度。这样图片就 好象被剪辑了一样，将显示成右下图的样子：
基本原理就介绍这么多，让我们来看两个例子
，一个是静态调整可视区域，一个是动态调整。
在这两个例子中，您可以点击对应的链接，得
到图片四条边的位置，可以点击链接使图片的可视
区按照规定的范围显示，还有您可以点击后，使图
片就像放电影一样，慢慢的展开。
哇，怎么这么多功能啊！
看第一个例子吧。
看第二个例子。
好了，本节介绍了Clip属性的应用实例，有关CSS-P的知识应用讲的差不多了，下
一节我将向您介绍一个动态字幕变换的例子。
14、动态文字变换
我们先来看下面这个效果：
洪恩在线
怎么样，这种文字渐淡显示的效果还可以吧，实现这种效果的代码如下：
<body οnlοad="playHelp()">
<div id="div1" οnlοad="playHelp()">
