CSS滤镜效果之英雄救美_建站学-个人建站指南,网页制作,网站设计,网站制作教程

本效果需要一定的JAVASCRIPT基础，属于CSS和JAVASCRIPT的高级运用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML><HEAD><TITLE>动态光源效果</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 style="COLOR: rgb(0,0,0); LEFT: 20px; POSITION: absolute; TOP: 20px; WIDTH: 100%"> <TBODY> <TR> <TD id=flttgt style="FILTER: light(enabled=1),width:300" width=449><IMG border=0 height=300 src="http://www.jzxue.com/System/uploads/userup/1105/010929494506.jpg" width=400> </TD> <TD style="VERTICAL-ALIGN: top" 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(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"," 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"," 通过捕捉用户鼠标位置的方法来移动光源。"," 这里的文本改变是响应单击事件的，并且只需要少量的编程。"); 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> <P><FONT color=#000000> </FONT></P> <DIV style="POSITION: absolute; TOP: 500px"> <P>　</P> </DIV> </BODY></HTML>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：admin)

搜索

热门标签:

CSS滤镜效果之英雄救美