css3高级滤镜-光照滤镜

来源:互联网 发布:linux怎么删除文件夹 编辑:程序博客网 时间:2024/04/29 20:13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1 style="color:blue">高级滤镜指需要配合JavaScript语言,产生变换效果的滤镜</h1>
   <h1>光照(Light)滤镜</h1>
   <ul>语法格式:
    <li>filter:Light(enabled=ienabled)</li>
   </ul>
   <ul>参数介绍:
       <li>1.AddAmbIE9.0nt:加入包围的光源</li>
       <li>2.AddCone:加入锥形光源</li>
       <li>3.AddPoint:加入点光源</li>
       <li>4.Changcolor:改变光的颜色</li>
       <li>5.ChangStrength:改变光的强度</li>
       <li>6.Clear:清除所有的光源</li>
       <li>7.MoveLight:移动光源</li>
   </ul>
   <ul>
    <table>
    <tr>
    <td style="color: blue;font-weight:bolder;">随鼠标变化的动态光源效果</td>
    </tr>
    <tr>
    <td id="light" style="filter:Light();width:200px"><img src="img/11.jpg"></td>
    </tr>
    </table>
   </ul>
   <script>
    var g_numlights=0;
    //调用设置光源的函数
    window.onload=setlights;
    //获得鼠标的句柄
    light.onmousemove=mousehandler;
    //建立光源的集合
    function setlights(){
    light.filters[0].clear();
    light.filters[0].addcone(0,0,5,100,100,255,255,0,60,30);
    }
    //捕捉鼠标的位置来移动光线焦点
    function mousehandler(){
    x=window.event.x-80;
    y=window.event.y-80;
    light.filters[0].MoveLight(0,x,y,5,1);
    }
   </script>
</body>
</html>
0 0
原创粉丝点击