CSS特效赏析---------------再续

12、鼠标控制

　　上一节我们讲了一个键盘控制的例子，本节我将向您介绍一个鼠标控制的例子。在
下面这个例子中，点击图片上方的超链接，图片就会移动。如果用鼠标一直按住链接不
放的话，图片就会持续移动下去。

　　实现这种效果的代码如下：

<html>
　　<head>
　　<script language="JavaScript">
　　
　　</script> </head>
　　<body bgcolor="#FFFFFF" onLoad="init()">
　　请您点击"移动"两个字，再一直按住鼠标左键看一看 <br>
　　<a href="javascript:void(null)"//*不要换网页*//
　　onMouseDown="block.active=true; slide(); return false;"
　　onMouseUp="block.active=false"
　　onMouseOut="block.active=false">移动</a>
　　//*设置鼠标的三种状态，当鼠标按下的时候，激活slide（）函数，开始滑动*//
　　<div id="blockDiv"
　　style="position:absolute; left:50; top:100; width:250;height:180">
　　<img src="ss07049.jpg" width=250 height=180 border=0>
　　</div>
　　</body>
　　</html>

　　其实上面这段代码和键盘控制的代码很相象，只是多了一个超链接的控制。
　　好了，下一节我将向您介绍动态控制对象可视区域的例子，听起来是不是很拗口，
没关系，很有意思的。

==站住：

红灯呀!斑马线

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、动态文字变换　　我们先来看下面这个效果：　　

怎么样，这种文字渐淡显示的效果还可以吧，实现这种效果的代码如下：

　　好了，本节就讲到这里了，下一节将向您介绍一种动态改变页面样式的例子。

Q分Q界线QQQQQQQQQ

　15、动态改变页面样式

　　我们先来看一下下面这个例子吧，请您用鼠标点击表格中相应的部分看效果。

9:10:09P.M.

时钟颜色	时钟背景	时钟字体	字体尺寸	字体粗细

紫色	红色	无边饰	24pt	普通
白色	黄色	有边饰	36pt	粗体

　　
通过点击表格中对应的部分，是表格上方的时钟样式发生了相应的改变。
　　其实，这种效果的实现很简单，那个时钟是用JavaScript实现的。而下面的这个表格的实现代码是这样的：

　　<p id="Clock" align="center"></p>
　　//*引入时钟*//
　　<table border="1" align="center">
　　<tr> <td class="p2">时钟颜色</td>
　　　　 <td class="p2">时钟背景</td>
　　　　 <td class="p2">时钟字体</td>
　　　　 <td class="p2">字体尺寸</td>
　　<td class="p2">字体粗细</td> </tr>
　　<tr> <td colspan="5" height="3"> </td> </tr>
　　<tr> <td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.color='purple'">紫色</span>
　　</td>
　　//*设置鼠标事件，鼠标放上、离开、点击时的状态*//
　　<td class="p2">
　　<span onmouseover="this.style.cursor='hand'"
　　　　　onmouseout="this.style.cursor=default"
　　　　　onclick="Clock.style.background='red'">红色</span>
　　</td>
　　……
　　//*省略号代表的代码和“紫色”、“红色”的定义是类似的*//

　　本节就介绍到这里，下一节将向您介绍一个动态时钟转换的例子。

SSSSSSSSSSSS

16、动态时钟控制

　　这个例子会让您看上去觉得眼花缭乱，在输入栏中输入不同的时间间隔会以不同的速度显示。

　　这里面主要用的是revealtrans滤镜属性，在每一个区域内都添加了revealtrans属性，再让它们调用onfilterchange函数。而输入时间间隔是靠javascript的onchange
事件实现的，下面我们把有关CSS的代码列出如下：

　　<body onload="init()">
　　<span style="position:absolute;top:140;left:20;width:400;
　　　　　　　　 text-align:center; font-size:12pt">
　　<p>输入新的时间间隔。
　　<input id="speed" onchange="updateTime()" size="20"> </span> </p>
　　//*定义输入文本框，调用updateTime（）函数*//
　　<div id="div1"
　　 style="position:absolute;top:20;left:20;width:100;height:100;
　　　　　　font-size:100;text-align:center;background-color:blue;
　　　　　　filter:revealtrans(transition=1,duration=1.5)"
　　　　　　onfilterchange="done(1)">
　　//*设置一个层，包括它的定位、字体和revealtrans滤镜属性，同时调用Done函数
　　　改变滤镜显示样式，达到动态的目的，下面的三个层的设置内容与这个类似*//
　　<p>A</p> </div>
　　<div id="div2"
　　style="position:absolute;top:20;left:140;width:100;height:100;
　　　　　 font-size: 100;text-align:center;background-color:blue;
　　　　　 filter:revealtrans(transition=2,duration=1.5)"
　　　　　 onfilterchange="done(2)">
　　 <p>A</p> </div>
　　<div id="div3"
　　style="position:absolute;top:20;left:260;width:100;height:100;
　　　　　 font- size:100;text-align:center;background-color:blue;
　　　　　filter:revealtrans(transition=3,duration=1.5)"
　　　　　 onfilterchange="done(3)">
　　 <p>A</p> </div>
　　<div id="div4"
　　 style="position:absolute;top:20;left:380;width:100;height:100;
　　　　　　font- size:100;text-align:center;background-color:blue;
　　　　　　filter:revealtrans(transition=4,duration=1.5)"
　　　　　　onfilterchange="done(4)">
　　 <p>A</p> </div>
　　</body>

　　好了，本节就介绍到这里，下一节将向您推荐一个倒计时的例子。

TTTTTTTTTTTTTTTTTTTTTTT

　17、倒计时

　　下面是一个有趣的例子，请

。
　　当您点击显示的红色方块时，以一种随机的revealtrans滤镜样式进入数字倒计时，
当您刷新整个页面后，再点击红色方块时，又会以另一种revealtrans的滤镜样式进入倒计时。怎么样，是不是很有趣。这里应用了大量的script的函数，而在定义数字显示区域时，用了CSS定位的知识，代码如下：

　　<div id ="div1"
　　//*这里的div1是一个类选择符，在JavaScript的函数中调用*//
　　 style="position:absolute;top:20;left:20; width:100;height:100;
　　　　　　font-size:100;text-align:center; background-color:red;
　　　　　　filter:revealtrans(transition=23,duration=.01)"
　　　　　　//*定义了revealtrans滤镜属性，样式设为随机，变换时间设为.01*//
　　　　　　onclick="Count()"
　　　　　　//*鼠标点击事件，触发Count（）函数*//
　　　　　　onfilterchange="Repeat()">
　　　　　　//*滤镜转换事件，触发Repeat（）函数*//
　　</div>

　　当然，您还可以查看实例的源代码，看一看javascript的代码是如何编写的。
　　好了，这一节就介绍到这里，下一节将向您介绍一个动态刷新的例子。

ZZZZZZZZZZZZZZZZ

18、动态刷新

　　我们先来看下面这个例子：

　　R G B

请输入您要刷新的文字[有些网站是试不了效果]

　　点击例子中的带颜色的RGB三个字母，分别表示将刷新后的文字变成对应的红、绿、蓝、三色。这个例子的实现代码如下：

<html>
　　<head>
　　<style TYPE="text/css">
　　 </style>
　　<script language="javascript">
　　 </script> </head>
　　<body onload="initialize()">
　　<p class="textbox" align="center">
　　<dd><input TYPE="TEXT" NAME="traintext" Value="请输入您要刷新的文字"
　　size="20">
　　<input name="BTN1" TYPE="BUTTON" VALUE="刷新" onclick="vandalize()">
　　<p><span STYLE="color:red;cursor:hand"
　　　　　　onclick="cmb2.style.color='#ff0000'">R</span>
　　　　<span style="color:lime;cursor:hand"
　　　　　　 onclick="cmb2.style.color='#00ff00'">G</span>
　　　　<span style="color:blue;cursor:hand"
　　　　　　 onclick="cmb2.style.color='#0000ff'">B</span></p></dd></p>
　　<p id="cmb1" CLASS="graffiti1" align="center"></p>
　　<p id="cmb2" CLASS="garffiti2" align="center"></p></body>
　　</html>

　　如果您看过了我们前面的讲解，理解这段代码并不难。您自己看一看吧，或者您动手试一试，今天就讲到这里了。
　　现在，CSS特效赏析的栏目就告一段落了，有关CSS的其他应用，我们会在以后推出的DHTML教程中再做讲解。对于教程本身，希望广大网友多提宝贵的意见，谢谢。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。