CSS濾鏡效果之英雄救美

2020-03-24 17:54:47

字體：大中小

供稿：網(wǎng)友

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
HTML HEAD TITLE 動態(tài)光源效果 /TITLE
META content="text/html; charset=gb2312" http-equiv=Content-Type
STYLE .shadow {
FILTER: shadow(color=blue,direction=225)
}
.shadow1 {
FILTER: shadow(color=red,direction=225)
}
.shadow2 {
FILTER: shadow(color=gray,direction=225)
}
.div {
CURSOR: move; FILTER: blur(add=ture,direction=135,strength=10); WIDTH: 800px
}
/STYLE
META content="MSHTML 5.00.2614.3500" name=GENERATOR /HEAD
BODY
TABLE border=3 borderColor=#008080 cellSpacing=10

TBODY
TR
TD id=flttgt width=449 IMG
border=0 height=300 src="http://www.jzxue.com/System/uploads/userup/1105/010929494506.jpg" width=400 /TD
TD width=287 SPAN id=holder
stylefont-size:14ptcolor:yellow? 把鼠標移到圖片上，光源會跟蹤鼠標。單擊圖片來加入其他的等觀燈光并且他們都會跟隨鼠標移動。
/SPAN /TD
/TR /TBODY /TABLE
SCRIPT language=JavaScript
!--
var g_numlights=0;
var blurbs= new Array(" 現(xiàn)在的動態(tài)濾鏡賦予了網(wǎng)頁更多的交互性能來響應用戶的動作。"," 我們使用了光源濾鏡來響應用戶的點擊。點擊圖片可以增加光源。"," 通過捕捉用戶鼠標位置的方法來移動光源。"," 這里的文本改變是響應單擊事件的，并且只需要少量的編程。");
window.onload=setlights;
document. eyhandler;
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
P FONT color=#000000 /FONT /P
DIV
P /P
/DIV
/BODY /HTML
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：表格對決CSS--一場生死之戰(zhàn)

下一篇：CSS3新特性一覽