当前位置：首页 > 编程日记 > 正文

巧用CSS的Light滤镜

编程日记 2024-11-22 09:10:00

作者：冯永曜

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.οnlοad=setlights1;
// 获得鼠标句柄
lightsy.οnmοusemοve=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.οnlοad=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程序稍作改动，就可获得更加美妙和效果。

https://www.dkcj.cn/info/28601.html

巧用CSS的Light滤镜

相关文章：

没有场景，不做单点技术输出，360数科如何做金融科技的最佳实践？

react构建淘票票webapp，及react与vue的简单比较。

【机器学习】机器学习算法优缺点对比（汇总篇）

PLSQL developer 连接不上64位Oracle 解决办法

Docker 使用教程

话说CSS滤镜

面向隐私AI的TensorFlow深度定制化实践

”拿来搞笑“的大学生活

巧用CSS的Border属性

阿里资深算法专家：如何突围大厂算法面试？

乡下人最嘲笑城里人的16件事，无语了！

2017浅谈面试（一）

乘风破浪的PTM：两年来预训练模型的技术进展

DW中CSS属性详解

第十周项目5：贪心的富翁

python requests返回的json对象用json.loads()时转为字典时编码变为了unicode

关于Dreamweaver乱码问题的解决方案

百度绝对控股，小度科技独立融资，投后估值200亿元

Android UI开发第二十五篇——分享一篇自定义的 Action Bar

ADF12C 在线预览PDF文件 afinlineFrame

批量消除虚线框

Python实战 | 送亲戚，送长辈，月饼可视化大屏来帮忙！

lamp一键安装包

快节奏的多人游戏同步 - 示例代码和在线演示

探索IE浏览器窗口

新转机！2020年想裸辞的程序员们注意了

《ORACLE PL/SQL编程详细》，游标，函数，触发器。。

【Spark Summit East 2017】Spark化数据引擎

将文本随意插入网页表单的 textarea

sharepoint 备份还原