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

HaoTia(n) 2010-12-26

展开全文

6、动态Glow属性

　　还记得在教程中讲过的Glow滤镜属性吗？下面这个例子动态的把它演示出来。
　　请您点击下面的这段文字：

网络时空求知无限

　　
怎么样，是不是有一种燃烧起来的感觉，反复点击文字将不断的发光。实现这种效果是很简单的，代码如下：

<html>
　　<head>
　　<title>css demo</title>
　　<script>
　　 </script>
　　</head>
　　<body text="pink">
　　<div id="myimg" onclick="zap()"
　　style="font-family:行书体;font-size:54;height:200;color:#ff9900;
　　filter:glow(color=#9999ff,strength=20,enabled=0)
　　blendtrans(duration=2)"> <p>网络时空求知无限</p> </div>
　　</body>
　　</html>

　　我们看到代码中还应用到了blendtrans属性，使您在点击后字体的变化有一种淡化
的效果。
　　从下一节开始，我将向您介绍一些利用CSS-P的知识做出来的特效例子。　

--------HaoTian--分界线--------

7、显示和隐藏

　　我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏

显示- show 　　　　　隐藏- hide

　　我们来看一下这个例子的源代码：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body onLoad="init()">
　　<a href="javascript:showObject(block)">显示-show</A>
　　<a href="javascript:hideObject(block)">隐蔽-hide</A>
　　//*两个超链接调用javascript中的两个函数*//
　　<div id="blockDiv" style="position:absolute; left:50; top:100;
　　width:200; visibility:visible;">
　　<img src="ss01094.jpg" border=0> </DIV> //*导入一张图片*//
　　</body>
　　</html>

　　我们看到这段代码有一些不同于前面的例子的特点。其实CSS大部分动态的特效都是
DHTML的范畴。
　　也就是说，它们都是CSS与JavaScript结合起来实现的一种效果。另外，上面这个例
子还涉及到了IE和NS兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲
解。

　6、动态Glow属性　　还记得在教程中讲过的Glow滤镜属性吗？下面这个例子动态的把它演示出来。　　请您点击下面的这段文字：网络时空求知无限　　怎么样，是不是有一种燃烧起来的感觉，反复点击文字将不断的发光。实现这种效果是很简单的，代码如下：　　　　　　　　　　　　　　

网络时空求知无限

　　　　　　我们看到代码中还应用到了blendtrans属性，使您在点击后字体的变化有一种淡化的效果。 --------HaoTian--分界线-------- 　　从下一节开始，我将向您介绍一些利用CSS-P的知识做出来的特效例子。 7、显示和隐藏　　我们来看一下这个例子，点击图片下方的文字使图片显示/隐藏显示- show 　　　　　隐藏- hide 　　我们来看一下这个例子的源代码：　　　　　　　　　　显示-show 　　隐蔽-hide 　　//*两个超链接调用javascript中的两个函数*// 　　
//*导入一张图片*// 　　　　　　我们看到这段代码有一些不同于前面的例子的特点。其实CSS大部分动态的特效都是 DHTML的范畴。　　也就是说，它们都是CSS与JavaScript结合起来实现的一种效果。另外，上面这个例子还涉及到了IE和NS兼容的问题。我们将在下一节针对两种浏览器的兼容问题做详细讲解。　
别分跑界过线界嘻嘻，帅帅——HaoTian

　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、移动

　　通过下面这个例子，您可以把图片移动到指定的地方。

　　实现这个例子的代码是这样的：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body onload="init()">
　　Check Values:
　　<a href="javascript:alert('X: ' + block.xpos)">横向位置</a>,
　　<a href="javascript:alert('Y: ' + block.ypos)">竖向位置</a> <br>
　　Visibility:
　　<a href="javascript:showObject(block)">显示</a>,
　　<a href="javascript:hideObject(block)">隐蔽</a> <br>
　　移动到 MoveTo:
　　<a href="javascript:moveTo(block,100,200)">(100,200)</a>,
　　<a href="javascript:moveTo(block,200,260)">(200,260)</a>,
　　<a href="javascript:moveTo(block,300,340)">(300,340)</a> <br>
　　相对移动 MoveBy:
　　<a href="javascript:moveBy(block,10,0)">(10,0)</a>,
　　<a href="javascript:moveBy(block,-10,0)">(-10,0)</a>,
　　<a href="javascript:moveBy(block,0,10)">(0,10)</a>,
　　<a href="javascript:moveBy(block,0,-10)">(0,-10)</a>
　　//*调用JavaScript中定义的函数*//
　　<div id="blockDiv" style="position:absolute; left:100; top:200;
　　width:30; visibility:visible;">
　　//*初始化一个区域的原始位置*//
　　<img src="ss05058.jpg" border=0> </div> </body>
　　</html>

　　下一节我将向您介绍一个滑动的例子。

分界线★过界10元

　10、滑动

　　上一节我们介绍了一个移动的例子，它可以使您随意放置对象的位置。那可不可以
让对象连续移动，从而实现一种动画的效果呢？我们来看个例子，。

　　怎么样，是不是有一种动起来的感觉，实现这种效果的代码如下：

<html>
　　<head>
　　<script language="JavaScript">
　　 </script> </head>
　　<body onLoad="init()">
　　<p> <a href="javascript:slide()">滑动</a>
　　<a href="javascript:moveTo(block,50,150)">返回</a>
　　<div id="blockDiv" STYLE="position:absolute; left:50; top:150;
　　width:400;"> //*定义对象的绝对位置*//
　　<img src="ss05058.jpg" width=250 height=150 border=0>
　　//*导入一张图片*// </div> </body>
　　</html>

　　本节我们讲述了一个滑动的例子，下一节将向您介绍一种用键盘控制对象移动、滑
动的方法。

--------HaoTian--分界线--------
11、键盘控制对象

　　本节我们将讲一下键盘控制对象移动的例子。
　　在前面讲过的使对象移动的例子，如果能用键盘来控制，将会大大加强您和电脑之
间的交互性。那么键盘控制怎么实现呢？
　　这需要涉及到事件问题。也就是说需要有一个键盘控制事件来激发键盘按下和松开的状态。这里用到的是“keydown”事件，这个事件的书写格式是这样的：

　　document.onkeydow=keydown

　　上面语句中的keydown是一个子程序，也就是说当您的浏览器读到这个子程序时，它就会知道您按下了哪一个键，从而作出相应的反应。我们下面来看一个例子：

　　请按任意键

　　当您按下任意键时，弹出了一个窗口，告诉您按下的是哪一个键，并且告诉您该键的内码是多少。实现这种键盘控制的代码如下：

<html>
　　<head>
　　<script language="javascript">
　　 </script>
　　//*子程序*//</head>
　　<body>
　　<p class="p2">请按任意键</p> </body>
　　</html>

　　上面的这个例子很简单是一个很简单的例子，，在这里您可以看到键盘控制图片移动的例子，您可以看到另外一种形式的移动。