|
|
 |
巧用CSS的Light滤镜 |
热 ★★★★ |
|
巧用CSS的Light滤镜 |
|
作者：闵涛 文章来源：闵涛的学习笔记 点击数：638 更新时间：2009/4/23 13:47:34  |
|
|
Light滤镜能产生一个模拟光源的效果，但使用它要通过调用它的“方法（Method）”来实现，这就要用到一些Javascrpt知识，虽然有一点难度，但产生的效果也是奇特的，你看看下面的效果图就明白了。
图1 原图
图2 Light光源滤镜效果
上面的这种效果是不是很酷？！当你把鼠标在图片上移动时，灯光还会跟着移动呢！不过这里只是我抓的一张图片，当你按我下面介绍的方法做一下，就可以试试如何让灯光跟着鼠标移动的效果了！其实这种效果在DW3中做起来一点都不难，不过这次光用鼠标点点是不行了。那我们就开始做吧。
制作步骤。
1、点击对象面板上的“imge"图标插入一幅图片；
2、用鼠标点一下插入的图片，打开DW3的源码检视窗，在刚插入图片的 “imge"标记中加入这样的代码：ID="lightsy" style="filter:light(enabled=1)" ；
3、然后在网页的源代码的“imge"标记代码后插入这样一段javascript 程序：
< script language="javascript" >
< !--
// 调用设置光源函数
window.onload=setlights1;
// 获得鼠标句柄
lightsy.onmousemove=mousehandler;
// 调用Light滤镜方法
function setlights1(){
lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
// 捕捉鼠标的位置来移动光线焦点
function mousehandler()
{
x=(window.event.x-40);
y=(window.event.y-40);
lightsy.filters[0].movelight(0,x,y,5,1);
}
-- >
< /script >
若是你不想让鼠标能控制灯光移动，那么只要下面这样几行代码就行了：
< script language="javascript" >
< !--
// 调用设置光源函数
window.onload=setlights1;
// 调用Light滤镜方法
function setlights1()
{
lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25); }
}
-- >
< /script >
至此，按F12就可看到奇妙的效果了，不难吧！ 我们不但要知其然，还要知其所以然，本例中很关键的是这句程序代码：lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25);括号中的数值是可以修改的，通过设置不同的值可以获得各种各样的灯光效果，那么这些数值参数代表什么意思呢？
第一个参数：光源的X坐标；第二个参数：光源的Y坐标；第三个参数：光源离开页面的高度；第四至第六个参数：光源的颜色；第七个参数：光源光的色相；第八个参数：光源的形状；第九个参数：光源的光的强度 ；第十个参数：光源光散开的范围。
一个光源不够，怎么办？你可以增加任意个光源。方法也很简单，就是在“setlights1 "函数中再增加几句lightsy.filters[0].addcone(380,-20,5,100,100,255,255,0,40,25)代码 ，不要忘记把参数改动一下，不然的话，光源都有在同一个位置可就看不出效果了。
上面只是用javascript调用了Light滤镜的“addcone"（加入锥形光源）和“movelight"（移动光源）方法。Light滤镜还有一些方法，介绍如下：
addambient ： 加入包围的光源；
addpoint ： 加入点光源；
changcolor ：改变光的颜色；
changestrength：改变光源的强度；
clear ： 清除所有光源。
我们只要对上面的javascript程序稍作改动，就可获得更加美妙和效果。
没有相关教程
|
|
| 教程录入：mintao 责任编辑：mintao |
|
|
上一篇教程： CSS 速查手册
下一篇教程： 自定多姿多彩的网页链接下划线 |
|
|
| 【字体：小 大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 |
|
 注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] |
| 网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！） |
| |
|
|
|
|
|
 |
同类栏目 |
 |
|
赞助链接 |
|
|
500 - 内部服务器错误。
|
|
|
|
|
|
