用CSS实现鼠标单击特殊效果图

　2008-03-09 11:32:14　来源：WEB开发网　闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷

闂傚倸鍊搁崐椋庣矆娓氣偓楠炲鏁撻悩鎻掔€梺姹囧灩閻忔艾鐣烽弻銉︾厵闁规鍠栭。濂告煕鎼达紕校闁靛洤瀚伴獮鎺楀箣濠靛啫浜鹃柣銏⑶圭壕濠氭煙閻愵剚鐏辨俊鎻掔墛缁绘盯宕卞Δ鍐冣剝绻涘畝濠佺敖缂佽鲸鎹囧畷鎺戭潩閹典焦鐎搁梻浣烘嚀閸ゆ牠骞忛敓锟�

婵犵數濮烽弫鍛婃叏椤撱垹绠柛鎰靛枛瀹告繃銇勯幘瀵哥畼闁硅娲熷缁樼瑹閳ь剙岣胯鐓ら柕鍫濇偪濞差亜惟闁宠桨鑳堕崝锕€顪冮妶鍡楃瑐闁煎啿鐖奸崺濠囧即閵忥紕鍘梺鎼炲劗閺呮稒绂掕缁辨帗娼忛埡浣锋闂佽桨鐒﹂幑鍥极閹剧粯鏅搁柨鐕傛嫹闂傚倸鍊搁崐椋庢濮橆兗缂氱憸宥堢亱闂佸湱铏庨崰鏍不椤栫偞鐓ラ柣鏇炲€圭€氾拷　　闂傚倸鍊搁崐鐑芥嚄閼哥數浠氱紓鍌欒兌缁垶銆冮崨鏉戠厺鐎广儱顦崡鎶芥煏韫囨洖校闁诲寒鍓熷铏圭磼濡搫顫岄梺璇茬箲濮樸劑鍩€椤掍礁鍤柛鎾跺枎椤繐煤椤忓嫬鐎銈嗘礀閹冲酣宕滄导瀛樷拺闂侇偆鍋涢懟顖涙櫠椤斿墽纾煎璺猴功缁夎櫣鈧鍠栭…閿嬩繆濮濆矈妲烽梺绋款儐閹瑰洤螞閸愩劉妲堟繛鍡楃箲濞堟﹢姊绘担椋庝覆缂傚秮鍋撴繛瀛樼矤閸撶喖宕洪埀顒併亜閹烘垵鈧綊寮抽鍕厱閻庯綆浜烽煬顒傗偓瑙勬磻閸楀啿顕ｉ崐鐕佹Ь闂佸搫妫寸粻鎾诲蓟閵娾晜鍋嗛柛灞剧☉椤忥拷

核心提示：如果你能很好地应用CSS，那么你的主页将被打扮得很靓，用CSS实现鼠标单击特殊效果图，下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图，一、将下面的代码复制到你的主页中<head>和</head>之间，x，y，<STYLE>.shadow {FILTER: shadow

如果你能很好地应用CSS，那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。

一、将下面的代码复制到你的主页中<head>和</head>之间。

<STYLE>.shadow {
FILTER: shadow(color=blue，direction=225)
}
.shadow1 {
FILTER: shadow(color=red，direction=225)
}
.shadow2 {
FILTER: shadow(color=green，direction=225)
}
.div {
CURSOR: move; FILTER: blur(add=ture，direction=135，strength=10); WIDTH: 800px
}
</STYLE>

在这里应用的是blur滤镜。

2、在页面中插入一张图片，比如我插入是<img border="0" src="http://tech.cncms.com/tech/UploadPic/2010107/2010107204036470.jpg" width="300" height="210">。在其前加入<TD id=flttgt style="filter: light(enabled=1)，'width 300'" width=315>。

在刚才我们插入图片下一行中加入<TD style="VERTICAL-ALIGN: top" width=314><SPAN id=holder stylefont-size:14ptcolor:yellow?>。（把鼠标移到图片上，光源会跟踪鼠标。单击图片加入其他光源并且跟随鼠标移动。)

3、在设置了图片属性后，我们还要应用JavaScript脚本代码，也就是使图片跟随鼠标移动一些特效，代码如下。

<SCRIPT language=JavaScript>
<!--
var g_numlights=0;
var blurbs= new Array(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"，" 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"，" 通过捕捉用户鼠标位置的方法来移动光源。"，" 不需要太多的编程。");
window.onload=setlights;
document.onclick=keyhandler;
flttgt.onmousemove=mousehandler;
function setlights(){
flttgt.filters[0].clear();
flttgt.filters[0].addcone(0，0，5，100，100，225，225，0，60，15);
if (g_numlights>0){
flttgt.filters[0].addcone(400，170，5，100，100，225，0，0，160，15);
if (g_numlights>1){
flttgt.filters[0].addcone(320，330，5，100，100，0，225，225，60，15);
}
}
}
function keyhandler()
{
g_numlights=(g_numlights+=1)%4;
holder.innerHTML=blurbs[g_numlights];
setlights();
}
function mousehandler()
{
x=(window.event.x-80);
y=(window.event.y-80);
flttgt.filters[0].movelight(1，x，y，5，1);
if(g_numlights>0){
flttgt.filters[0].movelight(1，x，y，5，1);
if(g_numlights>1)
{
flttgt.filters[0].movelight(2，x，y，5，1);
}
}
}
</SCRIPT>

（出处：赛迪网）