|
6、動態(tài)Glow屬性
還記得在教程中講過的Glow濾鏡屬性嗎？下面這個例子動態(tài)的把它演示出來。
請您點擊下面的這段文字：
怎么樣，是不是有一種燃燒起來的感覺，反復點擊文字將不斷的發(fā)光。實現(xiàn)這種效果是很簡單的，代碼如下：
<html>
<head>
<title>css demo</title>
<script>
<!--
function zap() {
if(myimg.filters.glow.enabled==1) {myimg.filters.glow.enabled=0; }
if(myimg.filters.blendtrans.status==0)
{myimg.filters.blendtrans.apply();
myimg.filters.glow.enabled=1; myimg.filters.blendtrans.play(); } }
--> </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屬性，使您在點擊后字體的變化有一種淡化
的效果。
從下一節(jié)開始，我將向您介紹一些利用CSS-P的知識做出來的特效例子。
7、顯示和隱藏
我們來看一下這個例子，點擊圖片下方的文字使圖片顯示/隱藏
顯示- show 隱藏- hide
我們來看一下這個例子的源代碼：
<html>
<head>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style }//*設置對象block*//
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible" }
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden" }
//*定義兩個函數分別用來顯示、隱藏對象block*//
//--> </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大部分動態(tài)的特效都是
DHTML的范疇。
也就是說，它們都是CSS與JavaScript結合起來實現(xiàn)的一種效果。另外，上面這個例
子還涉及到了IE和NS兼容的問題。我們將在下一節(jié)針對兩種瀏覽器的兼容問題做詳細講
解。
6、動態(tài)Glow屬性 還記得在教程中講過的Glow濾鏡屬性嗎？下面這個例子動態(tài)的把它演示出來。 請您點擊下面的這段文字：網絡時空 求知無限 怎么樣，是不是有一種燃燒起來的感覺，反復點擊文字將不斷的發(fā)光。實現(xiàn)這種效果是很簡單的，代碼如下：
我們看到代碼中還應用到了blendtrans屬性，使您在點擊后字體的變化有一種淡化的效果。 --------HaoTian--分界線-------- 從下一節(jié)開始，我將向您介紹一些利用CSS-P的知識做出來的特效例子。 7、顯示和隱藏 我們來看一下這個例子，點擊圖片下方的文字使圖片顯示/隱藏 顯示- show 隱藏- hide 我們來看一下這個例子的源代碼： 顯示-show 隱蔽-hide //*兩個超鏈接調用javascript中的兩個函數*//
//*導入一張圖片*// 我們看到這段代碼有一些不同于前面的例子的特點。其實CSS大部分動態(tài)的特效都是 DHTML的范疇。 也就是說，它們都是CSS與JavaScript結合起來實現(xiàn)的一種效果。另外，上面這個例子還涉及到了IE和NS兼容的問題。我們將在下一節(jié)針對兩種瀏覽器的兼容問題做詳細講解。
分
界
線
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在兩個瀏覽器下都能正常顯示呢？
我們針對上一節(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 }
//*這里定義了一個函數，初始化對象block，在NS中，對CSS對象的表示方法是：
document.blockdiv.propertyname,這里blockdiv是您可以任意定義的名稱。
在IE中， 表示方法是：blockdiv.style.propertyname。上面的代碼是針對兩
種瀏覽器用不同的格式定義對象block，從而確保了在兩種瀏覽器下都能正常顯示
。*//
下面我們就來看一個CSS-P與JavaScript結合起來的例子，您可以試一試在兩種瀏
覽器下是否都能正常顯示。 
下一節(jié)將向您介紹一個移動的例子。
9、移動
通過下面這個例子，您可以把圖片移動到指定的地方。
實現(xiàn)這個例子的代碼是這樣的：
<html>
<head>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left)
block.ypos = parseInt(block.top) }
//*定義初始函數，兩種瀏覽器下的對象的橫向、豎向坐標分別對應于對象相對于窗
口的左端、頂端的位置*//
function moveTo(obj,x,y) {
obj.xpos = x
obj.left = obj.xpos
obj.ypos = y obj.top = obj.ypos }
//*定義絕對移動函數*//
function moveBy(obj,x,y) {
obj.xpos += x
obj.left = obj.xpos
obj.ypos += y
obj.top = obj.ypos }
//*定義相對移動函數*//
function showObject(obj) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible" }
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden" }
//*定義顯示、隱藏函數*//
//--> </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;">
//*初始化一個區(qū)域的原始位置*//
<img src="ss05058.jpg" border=0> </div> </body>
</html>
下一節(jié)我將向您介紹一個滑動的例子。
分界線★過界10元
10、滑動
上一節(jié)我們介紹了一個移動的例子，它可以使您隨意放置對象的位置。那可不可以
讓對象連續(xù)移動，從而實現(xiàn)一種動畫的效果呢？我們來看個例子， 。
怎么樣，是不是有一種動起來的感覺，實現(xiàn)這種效果的代碼如下：
<html>
<head>
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block = document.blockDiv
if (ie4) block = blockDiv.style
block.xpos = parseInt(block.left) }
//*在兩種瀏覽器下定義對象block，橫坐標等于對象距窗口左端的長度*//
function slide() {
if (block.xpos < 500) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",10) }
} //*定義一個滑動函數，當橫坐標小于500時，對象距離左端的坐標值，每加5改
變一次，后面是一個定時語句*//
function moveTo(obj,x,y) {
obj.xpos = x
obj.ypos = y
obj.left = obj.xpos
obj.top = obj.ypos }
//*定義絕對移動函數，使對象的橫坐標等于距離窗口左端的長度，縱坐標等于距離
窗口頂端的長度*//
//--> </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>
本節(jié)我們講述了一個滑動的例子，下一節(jié)將向您介紹一種用鍵盤控制對象移動、滑
動的方法。
11、鍵盤控制對象
本節(jié)我們將講一下鍵盤控制對象移動的例子。
在前面講過的使對象移動的例子，如果能用鍵盤來控制，將會大大加強您和電腦之
間的交互性。那么鍵盤控制怎么實現(xiàn)呢？
這需要涉及到事件問題。也就是說需要有一個鍵盤控制事件來激發(fā)鍵盤按下和松開的狀態(tài)。這里用到的是“keydown”事件，這個事件的書寫格式是這樣的：
document.onkeydow=keydown
上面語句中的keydown是一個子程序，也就是說當您的瀏覽器讀到這個子程序時，它就會知道您按下了哪一個鍵，從而作出相應的反應。我們下面來看一個例子：
請按任意鍵
當您按下任意鍵時，彈出了一個窗口，告訴您按下的是哪一個鍵，并且告訴您該鍵的內碼是多少。實現(xiàn)這種鍵盤控制的代碼如下：
<html>
<head>
<script language="javascript">
<!--
function keyDown() {
var keycode = event.keyCode
var realkey = String.fromCharCode(event.keyCode)
alert("keycode: " + keycode + "\nrealkey: " + realkey) }
document.onkeydown = keyDown
//--> </script>
//*子程序*//</head>
<body>
<p class="p2">請按任意鍵</p> </body>
</html>
上面的這個例子很簡單是一個很簡單的例子， ，在這里您可以看到鍵盤控制圖片移動的例子， 您可以看到另外一種形式的移動。
好了，本節(jié)就講到這里，下一節(jié)將向您介紹鼠標點擊控制的例子。
|
