|
從現(xiàn)在開始,，我將向您介紹一系列的CSS作品,，這些大都是CSS與JavaScript結(jié)合起來產(chǎn)生的特效,。您可以通過對(duì)這些特效的欣賞,，進(jìn)一步領(lǐng)略到CSS的強(qiáng)大功能,。
1,、動(dòng)態(tài)改變樣式
我們先來看一個(gè)較簡(jiǎn)單的特效,，這里只是用到了屬性和鼠標(biāo)事件,。
請(qǐng)把鼠標(biāo)移到藍(lán)色背景的文字下面。
我們使用“class”類屬性來改變文檔的樣式,。 放大這段文本,。
這個(gè)例子的代碼是這樣的：
<html>
<head>
<title>change style</title>
<style>
<!--
.bigchange{color:blue;font-weight:bolder;font-size:225%;
letter-spacing:4px;background:yellow;}
//*定義bigchange類的字體的顏色、粗細(xì),、大小,，字間距，背景色*//
.start{color:yellow;background:navy;}
//*定義start類的字體的顏色和背景色*//
-->
</style>
</head>
<body>
<h1>動(dòng)態(tài)改變樣式</h1>
<p>請(qǐng)把鼠標(biāo)移到藍(lán)色背景的文字下面,。</p>
<p>我們使用"class"類屬性來改變文檔的樣式,。
<span onmouseover="this.className='bigchange'"
onmouseout="this.classname='start'" class="start"
style="cursor:hand">
放大這段文本。 </span> </p> </body>
//*定義鼠標(biāo)觸發(fā)事件,，當(dāng)鼠標(biāo)放上去的時(shí)候,，區(qū)域內(nèi)以bigchange類的格式顯示，
當(dāng)鼠標(biāo)離開的時(shí)候,，以start類顯示*//
</html>
這個(gè)例子很簡(jiǎn)單,，容易理解，就不多說什么了,，下一節(jié)將向您介紹一個(gè)動(dòng)態(tài)顯示的例子,。
2、動(dòng)態(tài)可視化效果
這一節(jié)我們講一個(gè)動(dòng)態(tài)顯示的例子,， ,。
實(shí)現(xiàn)這種顯示/隱藏效果的代碼如下：
<html>
<head>
<title> dtksh </title>
<script>
<!--
function caption() {
if(bobo.style.visibility=="hidden")
{ bobo.style.visibility="" sway.style.visibility="" }
else{ bobo.style.visibility="hidden"
sway.style.visibility="hidden" }
}
-->//*定義一個(gè)函數(shù)，使bobo,、sway兩個(gè)類隱藏*//
</script>
</head>
<body>
<div id="bobo" style="visibility:hidden;position:absolute;
top:20;left:15; width:190;height:35;
background-color:rgb(62,174,128);
filter:alpha(opacity=60)"> </div>//*定義一個(gè)類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;">//*定義一個(gè)類sway*//
<p style="font-family:bailey;font-size:14pt;
font-weight:bold;text-align:center"> Sports is wonderful! </p>
</div> <p>//*寫一行字,，在sway類定義下*///
<img src="ss07049.jpg" onmouseover="caption()"
onmouseout="caption()"> </p>//*導(dǎo)入一張圖片*//
<p class="p2" style="color:red">
請(qǐng)把您的鼠標(biāo)移動(dòng)到圖片上,，然后再把鼠標(biāo)從圖片上挪開。
</p> </body>
</html>
下一節(jié)將向您介紹一個(gè)動(dòng)態(tài)濾鏡轉(zhuǎn)換的例子,。
3,、動(dòng)態(tài)濾鏡顯示
本節(jié)將向您介紹一個(gè)動(dòng)態(tài)濾鏡顯示的例子中，在這個(gè)例子中您可以隨意改變透明度的開始值,、結(jié)束值和樣式（style）。  ,。
這個(gè)例子先是在<head>中加入了一段JavaScript語(yǔ)句,，代碼如下：
<script language="javascript">
<!--
function setfilter(){
myimage.filters.alpha.opacity=document.forms(0).opacity.value
myimage.filters.alpha.finishopacity=
document.forms(0).finishopacity.value
myimage.filters.alpha.style=document.forms(0).setstyle.value }
-->
</script>
這段代碼定義圖片的透明度等于表單中輸入的對(duì)應(yīng)的透明度的值。myimage是一個(gè)類
,，標(biāo)識(shí)圖片,。它的CSS樣式是這樣定義的：
<img id="myimage" src="ss07075.jpg"
style="filter:alpha();position:absolute;top:10;left:0;">
最后，在圖片下方加入三個(gè)表單,，分別對(duì)應(yīng)輸入初始透明度,、結(jié)束透明度和樣式值
，通過透明度的改變,，使隱藏在圖片下的文字顯示出來,。
下一節(jié)將向您介紹一種特殊的濾鏡效果。
4,、Blentrans屬性
本節(jié)介紹一種特效,，它應(yīng)用到的是CSS中的混合轉(zhuǎn)換濾鏡blendtrans。請(qǐng)您先看一下
下面這個(gè)例子：
濾鏡效果
使用方法 請(qǐng)單擊這里使文字淡出,，再次單擊后可以使文字逐漸出現(xiàn),。
我們?yōu)檫@段文字加上的逐漸淡出的多媒體效果。
看到了嗎,？這是一種淡入淡出的效果,。讓我們來看一下而這種效果用到的轉(zhuǎn)換屬性
blendtrans的語(yǔ)法：
Filter：BlendTrans（duration=淡入或淡出的時(shí)間，以秒作單位)
我們看到了BlendTrans屬性只有一個(gè)屬性值duration,，它指定了對(duì)象淡入淡出的時(shí)
間,。
上面的例子的源代碼如下所示：
<html>
<head>
<title> dhtml</title>
<style>
<!--
em{color:red;cursor:hand;font-size:14pt}
-->
</style> </head>
<body>
<h1>濾鏡效果</h1>
<p><strong>使用方法</strong>
<span id="text4" onclick="curobj=inner3;togglemultimedia()">
請(qǐng)單擊<b><em style="color:red">這里</em></b>使文字淡出，
再次單擊后可以使文字逐漸出現(xiàn),。</p>
<div id="inner3" style="width:100%;color:red;
filter:blendtrans(duration=3)">
<p> 我們?yōu)檫@段文字加上的逐漸淡出的多媒體效果,。</span></p> </div>
<script language="javascript">
<!--
var curobj;
function togglemultimedia(){
if (curobj.filters(0).status==2){ curobj.filters(0).stop();
if (curobj.style.visibility=="hidden")
curobj.style.visibility="visible";
else curobj.style.visibility="hidden";
window.settimeout("togglemultimedia()",1); }
curobj.filters(0).apply();
if (curobj.style.visibility=="hidden")
curobj.style.visibility="visible";
else curobj.style.visibility="hidden"; curobj.filters(0).play(); }
-->
</script> </body>
</html>
除了文字外，圖片是不是也能實(shí)現(xiàn)這種混合效果呢,？答案是肯定的,。下一節(jié)將向您
介紹圖片的混合轉(zhuǎn)換濾鏡效果和顯示轉(zhuǎn)換濾鏡效果。
[
][
][
]
5,、RevealTrans屬性
上一節(jié)我們介紹了混合轉(zhuǎn)換濾鏡的一個(gè)例子,，本節(jié)我們來看一下RevealTrans屬性
,，RevealTrans屬性提供了更加多變的轉(zhuǎn)換效果。它的書寫格式是這樣的：
Filter:revealtrans(duration=轉(zhuǎn)換的秒數(shù),，transition=轉(zhuǎn)換的類型）
表達(dá)式中的transition參數(shù)的參數(shù)值有24中,，以代號(hào)0-23來表示，分別代表24中顯
示類型,，具體的參數(shù)值列表如下圖所示：
下面的兩個(gè)例子,，一個(gè)是應(yīng)用了上一節(jié)講的blendtrans屬性，一個(gè)是應(yīng)用了本節(jié)所
說的revealtrans屬性,。
請(qǐng)點(diǎn)擊下面的兩幅圖,，看完效果后請(qǐng)點(diǎn)擊IE的刷新按鈕。(在這里就不試效果了,，大家可以自己試試)
我們看到將revealtrans屬性的transition參數(shù)值設(shè)置為23,，為隨機(jī)選取模式，顯
示的是更為多變的效果,。
下一節(jié)我將向您介紹一種發(fā)光特效,。
|
