| |
CSS滤镜制作Dhtml实例(5)
看一下下面的图片,注意图片的右边有文字说明:
源代码如下,下面的代码放在<body>之后:
<div style="position:absolute; left:588px;
top:219px; width:77px; height:269px">
<span id="holder">单击图片加入其他的灯光,移动鼠标,光源会跟踪鼠标.</span>
</div>
下面的代码放在<body></body>之间需要的位置:
<img src="rose.jpg" width="360"
height="270" id="flttgt" style="filter:
light(enabled=1)">
下面的代码放在</body>之前:
<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>
上一页 返回目录
|
