CSS特效賞析---------------續(xù)

HaoTia(n) 2010-12-26

展開全文

6、動態(tài)Glow屬性

　　還記得在教程中講過的Glow濾鏡屬性嗎？下面這個例子動態(tài)的把它演示出來。
　　請您點擊下面的這段文字：

網(wǎng)絡(luò)時空求知無限

　　
怎么樣，是不是有一種燃燒起來的感覺，反復(fù)點擊文字將不斷的發(fā)光。實現(xiàn)這種效果是很簡單的，代碼如下：

<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>網(wǎng)絡(luò)時空求知無限</p> </div>
　　</body>
　　</html>

　　我們看到代碼中還應(yīng)用到了blendtrans屬性，使您在點擊后字體的變化有一種淡化
的效果。
　　從下一節(jié)開始，我將向您介紹一些利用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>
　　//*兩個超鏈接調(diào)用javascript中的兩個函數(shù)*//
　　<div id="blockDiv" style="position:absolute; left:50; top:100;
　　width:200; visibility:visible;">
　　<img src="ss01094.jpg" border=0> </DIV> //*導(dǎo)入一張圖片*//
　　</body>
　　</html>

　　我們看到這段代碼有一些不同于前面的例子的特點。其實CSS大部分動態(tài)的特效都是
DHTML的范疇。
　　也就是說，它們都是CSS與JavaScript結(jié)合起來實現(xiàn)的一種效果。另外，上面這個例
子還涉及到了IE和NS兼容的問題。我們將在下一節(jié)針對兩種瀏覽器的兼容問題做詳細(xì)講
解。

　6、動態(tài)Glow屬性　　還記得在教程中講過的Glow濾鏡屬性嗎？下面這個例子動態(tài)的把它演示出來?！　≌埬c擊下面的這段文字：網(wǎng)絡(luò)時空求知無限　　怎么樣，是不是有一種燃燒起來的感覺，反復(fù)點擊文字將不斷的發(fā)光。實現(xiàn)這種效果是很簡單的，代碼如下：　　　　　　　　　　　　　　

網(wǎng)絡(luò)時空求知無限

　　　　　　我們看到代碼中還應(yīng)用到了blendtrans屬性，使您在點擊后字體的變化有一種淡化的效果。 --------HaoTian--分界線-------- 　　從下一節(jié)開始，我將向您介紹一些利用CSS-P的知識做出來的特效例子。 7、顯示和隱藏　　我們來看一下這個例子，點擊圖片下方的文字使圖片顯示/隱藏顯示- show 　　　　　隱藏- hide 　　我們來看一下這個例子的源代碼：　　　　　　　　　　顯示-show 　　隱蔽-hide 　　//*兩個超鏈接調(diào)用javascript中的兩個函數(shù)*// 　　
//*導(dǎo)入一張圖片*// 　　　　　　我們看到這段代碼有一些不同于前面的例子的特點。其實CSS大部分動態(tài)的特效都是 DHTML的范疇?！　∫簿褪钦f，它們都是CSS與JavaScript結(jié)合起來實現(xiàn)的一種效果。另外，上面這個例子還涉及到了IE和NS兼容的問題。我們將在下一節(jié)針對兩種瀏覽器的兼容問題做詳細(xì)講解。　
別分跑界過線界嘻嘻，帥帥——HaoTian

　8、瀏覽器的兼容問題

　　首先我們來了解一下什么是CSS-P。
　　CSS-P是Cascading Style Sheets Positioning的縮寫。從字面上我們可以把它理
解成是用來控制任何元素在頁面上或窗口上的位置的。而具體跟CSS-P有關(guān)的屬性包括以
下這些：
　　Position、Left、Top、Height、Width、Clip、Visibility、Z-index、
Background-color、Layer-background-color、Background-image和Layer-
background-image等。
　　我們看到這些屬性在前面的教程中都已經(jīng)介紹過了，實際上就是CSS定位方面的知識
。
　　誰都知道最常用的兩個瀏覽器是IE和NetScape。我們?nèi)绾巫尯蚃avaScript結(jié)合起來
應(yīng)用的CSS在兩個瀏覽器下都能正常顯示呢？
　　我們針對上一節(jié)的例子來講解，它是這樣實現(xiàn)兼容的問題的：
　　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 }
　　//*這里定義了一個函數(shù)，初始化對象block，在NS中，對CSS對象的表示方法是：
　　　document.blockdiv.propertyname,這里blockdiv是您可以任意定義的名稱。
　　　在IE中，表示方法是：blockdiv.style.propertyname。上面的代碼是針對兩
　　　種瀏覽器用不同的格式定義對象block，從而確保了在兩種瀏覽器下都能正常顯示
　　　。*//

　　下面我們就來看一個CSS-P與JavaScript結(jié)合起來的例子，您可以試一試在兩種瀏
覽器下是否都能正常顯示。

　　下一節(jié)將向您介紹一個移動的例子。　

分界啦，下一章了！
9、移動

　　通過下面這個例子，您可以把圖片移動到指定的地方。

　　實現(xiàn)這個例子的代碼是這樣的：

<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>
　　//*調(diào)用JavaScript中定義的函數(shù)*//
　　<div id="blockDiv" style="position:absolute; left:100; top:200;
　　width:30; visibility:visible;">
　　//*初始化一個區(qū)域的原始位置*//
　　<img src="ss05058.jpg" border=0> </div> </body>
　　</html>

　　下一節(jié)我將向您介紹一個滑動的例子。

分界線★過界10元

　10、滑動

　　上一節(jié)我們介紹了一個移動的例子，它可以使您隨意放置對象的位置。那可不可以
讓對象連續(xù)移動，從而實現(xiàn)一種動畫的效果呢？我們來看個例子，。

　　怎么樣，是不是有一種動起來的感覺，實現(xiàn)這種效果的代碼如下：

<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>
　　//*導(dǎo)入一張圖片*// </div> </body>
　　</html>

　　本節(jié)我們講述了一個滑動的例子，下一節(jié)將向您介紹一種用鍵盤控制對象移動、滑
動的方法。

--------HaoTian--分界線--------
11、鍵盤控制對象

　　本節(jié)我們將講一下鍵盤控制對象移動的例子。
　　在前面講過的使對象移動的例子，如果能用鍵盤來控制，將會大大加強(qiáng)您和電腦之
間的交互性。那么鍵盤控制怎么實現(xiàn)呢？
　　這需要涉及到事件問題。也就是說需要有一個鍵盤控制事件來激發(fā)鍵盤按下和松開的狀態(tài)。這里用到的是“keydown”事件，這個事件的書寫格式是這樣的：

　　document.onkeydow=keydown

　　上面語句中的keydown是一個子程序，也就是說當(dāng)您的瀏覽器讀到這個子程序時，它就會知道您按下了哪一個鍵，從而作出相應(yīng)的反應(yīng)。我們下面來看一個例子：

　　請按任意鍵

　　當(dāng)您按下任意鍵時，彈出了一個窗口，告訴您按下的是哪一個鍵，并且告訴您該鍵的內(nèi)碼是多少。實現(xiàn)這種鍵盤控制的代碼如下：

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

　　上面的這個例子很簡單是一個很簡單的例子，，在這里您可以看到鍵盤控制圖片移動的例子，您可以看到另外一種形式的移動。

　　好了，本節(jié)就講到這里，下一節(jié)將向您介紹鼠標(biāo)點擊控制的例子。

本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點擊一鍵舉報。

小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

CSS特效賞析---------------續(xù)