上一節(jié)我們講了一個(gè)鍵盤(pán)控制的例子，本節(jié)我將向您介紹一個(gè)鼠標(biāo)控制的例子。在
下面這個(gè)例子中，點(diǎn)擊圖片上方的超鏈接，圖片就會(huì)移動(dòng)。如果用鼠標(biāo)一直按住鏈接不
放的話，圖片就會(huì)持續(xù)移動(dòng)下去。
實(shí)現(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.active = false }//*兼容兩種瀏覽器*//
function slide() {
if (block.active) {
block.xpos += 5
block.left = block.xpos
setTimeout("slide()",30) }
} //-->
</script> </head>
<body bgcolor="#FFFFFF" onLoad="init()">
請(qǐng)您點(diǎn)擊"移動(dòng)"兩個(gè)字，再一直按住鼠標(biāo)左鍵看一看 <br>
<a href="javascript:void(null)"//*不要換網(wǎng)頁(yè)*//
onMouseDown="block.active=true; slide(); return false;"
onMouseUp="block.active=false"
onMouseOut="block.active=false">移動(dòng)</a>
//*設(shè)置鼠標(biāo)的三種狀態(tài)，當(dāng)鼠標(biāo)按下的時(shí)候，激活slide（）函數(shù)，開(kāi)始滑動(dòng)*//
<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>
上一節(jié)說(shuō)到了動(dòng)態(tài)可視區(qū)的調(diào)整，實(shí)際上就是Clip屬性的應(yīng)用。
Clipping的中文解釋就是剪輯的意思，這個(gè)屬性決定了對(duì)象的哪個(gè)部位可以被看到。它不會(huì)改變?nèi)魏螌?duì)象的性質(zhì)。
Clipping 的區(qū)域是一個(gè)矩形， 而這個(gè)矩形的尺寸取決于于四個(gè)邊的位置。
這四個(gè)邊用 top, right, botton, left 來(lái)表示。
請(qǐng)注意：這四個(gè)邊的位置是相對(duì)于對(duì)象的而不是相對(duì)于窗口的。
Clip屬性的書(shū)寫(xiě)格式是這樣的：
Clip rect（top，right，bottom，left）
在這里，top，right，bottom，left的值都是以像素pixels為單位的。
style="clip:rect(0,200,100,0)"
這段代碼使圖片將以200×100的形式顯
示。這是因?yàn)閞ect中規(guī)定的200，代表了圖片的右端距離是200pixels，也就 是圖片的寬度是200pixels；同理， 100定義的則是圖片的高度。這樣圖片就 好象被剪輯了一樣，將顯示成右下圖的樣子：
在這兩個(gè)例子中，您可以點(diǎn)擊對(duì)應(yīng)的鏈接，得
到圖片四條邊的位置，可以點(diǎn)擊鏈接使圖片的可視
區(qū)按照規(guī)定的范圍顯示，還有您可以點(diǎn)擊后，使圖
片就像放電影一樣，慢慢的展開(kāi)。
哇，怎么這么多功能??！ 看第一個(gè)例子吧。
看第二個(gè)例子。
怎么樣，這種文字漸淡顯示的效果還可以吧，實(shí)現(xiàn)這種效果的代碼如下：
<html>
<head>
<script>
<!--
function HelpArray(len){this.length=len }
HelpText= new HelpArray(5)
HelpText[0]="網(wǎng)絡(luò)時(shí)空K688.COM"
HelpText[1]="免費(fèi)代碼"
HelpText[2]="網(wǎng)頁(yè)素材"
HelpText[3]="精彩教程，與您共享"
HelpText[4]="http://www.k688.com"
ScriptText=new HelpArray(5)
//*定義文本數(shù)組，一共是五段文本*//
var i = -1
function playHelp() {
if (i==4) { i=0 }
else { i++ }
div1.filters[0].apply()
div1.innerText=HelpText[i]
div1.filters[0].play()
mytimeout=setTimeout("playHelp()",2500)}
//*定義play函數(shù)，并且設(shè)置了時(shí)間間隔*//
-->
</script>
<style> <!--
#div1{position:absolute;top:20;left:20;width:480;height:200;
font-family:行書(shū)體; color:red;font-size:40;
font-weight:bold;text-align:center;
filter:revealtrans(transition=12,duration=2) }
//*設(shè)置顯示轉(zhuǎn)換濾鏡*//
-->
</style> </head>
<body onload="playHelp()">
<div id="div1" onload="playHelp()"> </div>
</body>
</html>
我們先來(lái)看一下下面這個(gè)例子吧，請(qǐng)您用鼠標(biāo)點(diǎn)擊表格中相應(yīng)的部分看效果。
9:10:09P.M.
| 時(shí)鐘顏色 | 時(shí)鐘背景 | 時(shí)鐘字體 | 字體尺寸 | 字體粗細(xì) |
| 紫色 | 紅色 | 無(wú)邊飾 | 24pt | 普通 |
| 白色 | 黃色 | 有邊飾 | 36pt | 粗體 |
通過(guò)點(diǎn)擊表格中對(duì)應(yīng)的部分，是表格上方的時(shí)鐘樣式發(fā)生了相應(yīng)的改變。
其實(shí)，這種效果的實(shí)現(xiàn)很簡(jiǎn)單，那個(gè)時(shí)鐘是用JavaScript實(shí)現(xiàn)的。而下面的這個(gè)表格的實(shí)現(xiàn)代碼是這樣的：
<p id="Clock" align="center"></p>
//*引入時(shí)鐘*//
<table border="1" align="center">
<tr> <td class="p2">時(shí)鐘顏色</td>
<td class="p2">時(shí)鐘背景</td>
<td class="p2">時(shí)鐘字體</td>
<td class="p2">字體尺寸</td>
<td class="p2">字體粗細(xì)</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>
//*設(shè)置鼠標(biāo)事件，鼠標(biāo)放上、離開(kāi)、點(diǎn)擊時(shí)的狀態(tài)*//
<td class="p2">
<span onmouseover="this.style.cursor='hand'"
onmouseout="this.style.cursor=default"
onclick="Clock.style.background='red'">紅色</span>
</td>
……
//*省略號(hào)代表的代碼和“紫色”、“紅色”的定義是類(lèi)似的*//
這個(gè)例子會(huì)讓您看上去覺(jué)得眼花繚亂，在輸入欄中輸入不同的時(shí)間間隔會(huì)以不同的速度顯示。
這里面主要用的是revealtrans濾鏡屬性，在每一個(gè)區(qū)域內(nèi)都添加了revealtrans屬性，再讓它們調(diào)用onfilterchange函數(shù)。而輸入時(shí)間間隔是靠javascript的onchange
事件實(shí)現(xiàn)的，下面我們把有關(guān)CSS的代碼列出如下：
<body onload="init()">
<span style="position:absolute;top:140;left:20;width:400;
text-align:center; font-size:12pt">
<p>輸入新的時(shí)間間隔。
<input id="speed" onchange="updateTime()" size="20"> </span> </p>
//*定義輸入文本框，調(diào)用updateTime（）函數(shù)*//
<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)">
//*設(shè)置一個(gè)層，包括它的定位、字體和revealtrans濾鏡屬性，同時(shí)調(diào)用Done函數(shù)
改變?yōu)V鏡顯示樣式，達(dá)到動(dòng)態(tài)的目的，下面的三個(gè)層的設(shè)置內(nèi)容與這個(gè)類(lèi)似*//
<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>
下面是一個(gè)有趣的例子，請(qǐng)。
當(dāng)您點(diǎn)擊顯示的紅色方塊時(shí)，以一種隨機(jī)的revealtrans濾鏡樣式進(jìn)入數(shù)字倒計(jì)時(shí)，
當(dāng)您刷新整個(gè)頁(yè)面后，再點(diǎn)擊紅色方塊時(shí)，又會(huì)以另一種revealtrans的濾鏡樣式進(jìn)入倒計(jì)時(shí)。怎么樣，是不是很有趣。這里應(yīng)用了大量的script的函數(shù)，而在定義數(shù)字顯示區(qū)域時(shí)，用了CSS定位的知識(shí)，代碼如下：
<div id ="div1"
//*這里的div1是一個(gè)類(lèi)選擇符，在JavaScript的函數(shù)中調(diào)用*//
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濾鏡屬性，樣式設(shè)為隨機(jī)，變換時(shí)間設(shè)為.01*//
onclick="Count()"
//*鼠標(biāo)點(diǎn)擊事件，觸發(fā)Count（）函數(shù)*//
onfilterchange="Repeat()">
//*濾鏡轉(zhuǎn)換事件，觸發(fā)Repeat（）函數(shù)*//
</div>
我們先來(lái)看下面這個(gè)例子：
請(qǐng)輸入您要刷新的文字[有些網(wǎng)站是試不了效果]
請(qǐng)輸入您要刷新的文字[有些網(wǎng)站是試不了效果]
點(diǎn)擊例子中的帶顏色的RGB三個(gè)字母，分別表示將刷新后的文字變成對(duì)應(yīng)的紅、綠、藍(lán)、三色。這個(gè)例子的實(shí)現(xiàn)代碼如下：
<html>
<head>
<style TYPE="text/css">
<!--
textarea{font:georgia}
input{font-size:15px"georgia";
background:yellow;color:purple;height:23px;}
p.graffiti1{font-family:arial;font-size:30px;color:black;}
p.graffiti2{font-family:arial;font-size:30px;color:white;}
p.textbox{font-family:georgia;font-size:26px;color:purple}
span{font-family:"wide latin";font-size:36px;}
--> </style>
<script language="javascript">
<!--
function initialize(){
document.all.cmb1.innerText=traintext.value;
document.all.cmb2.innerText=traintext.value;}
function vandalize()
{var s=traintext.value; if (s.length>15)
{alert("please use 15 characters or less"); traintext.value="";}
else{document.all.cmb1.innerText=traintext.value;
document.all.cmb2.innerText=traintext.value;}}
//--> </script> </head>
<body onload="initialize()">
<p class="textbox" align="center">
<dd><input TYPE="TEXT" NAME="traintext" Value="請(qǐng)輸入您要刷新的文字"
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>
如果您看過(guò)了我們前面的講解，理解這段代碼并不難。您自己看一看吧，或者您動(dòng)手試一試，今天就講到這里了。
現(xiàn)在，CSS特效賞析的欄目就告一段落了，有關(guān)CSS的其他應(yīng)用，我們會(huì)在以后推出的DHTML教程中再做講解。對(duì)于教程本身，希望廣大網(wǎng)友多提寶貴的意見(jiàn)，謝謝。
聯(lián)系客服
