CSS滤镜效果之英雄救美

2020-03-24 17:54:47

字体：大中小

来源：转载

供稿：网友

!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

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(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"," 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"," 通过捕捉用户鼠标位置的方法来移动光源。"," 这里的文本改变是响应单击事件的，并且只需要少量的编程。");
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教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：表格对决CSS--一场生死之战

下一篇：CSS3新特性一览