巧用CSS的Light滤镜

原创 2004年11月04日 09:51:00
作者: 冯永曜

Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的“方法(Method)”来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是奇特的,你看看下面的效果图就明白了。
05-1.jpg图1 原图
05-2.jpg图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程序稍作改动,就可获得更加美妙和效果。
版权声明:本文为博主原创文章,未经博主允许不得转载。

css滤镜之light实现的灯光效果.

效果图: 源码: 保存为html文件, 在IE6及以上版本IE浏览器可以运行....                                    Light滤镜              d...
  • lgg201
  • lgg201
  • 2010年03月09日 08:59
  • 3610

做出漂亮的网页表格(CSS代替bordercolorlight与bordercolordark)

我们可以使用bordercolorlight与bordercolordark 来设置Table的边框,使之变得漂亮;     1、 bordercolorlight与bordercolordar...
  • angel20082008
  • angel20082008
  • 2016年03月09日 09:55
  • 1313

bordercolorlight的CSS实现

在 IE 中可以对 table 使用 border + bordercolordark + bordercolorlight 来实现表格边框的明暗效果。但要通过对应的 css 样式定义来实现这种效果,...
  • Linux7985
  • Linux7985
  • 2010年09月29日 11:24
  • 3115

Ubuntu 下安装thttpd Web服务器

不知道大家是不是真的需要用appache这么复杂的功能这么强大的web server,其实有很多时候使用webserver也只是一种远程共享访问的方式。这里,Ubuntu repository的提供了...
  • 21aspnet
  • 21aspnet
  • 2011年06月28日 13:49
  • 4072

巧用CSS的Light滤镜

作者: 冯永曜Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的“方法(Method)”来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是奇特的,你看看下面的效...
  • 21aspnet
  • 21aspnet
  • 2004年11月04日 09:51
  • 1975

lightwindow的使用教程

声明:本教程只是将英文原版的翻译了过来。 第一步:将三个js文件和一个css文件包含在你要实现的页面中。第二步:在超链接(hyperlink)标签里,你可以改变如下属性。params="lightwi...
  • joliny
  • joliny
  • 2008年06月29日 17:52
  • 2813

CSS filter滤镜的用法

filter:filtername(parameters) 即 filter:滤镜名称(参数) 滤镜效果 ...
  • smallcol
  • smallcol
  • 2007年08月19日 21:26
  • 3495

CSS3 常用滤镜效果

css3属性 -webkit-filter   -webkit-filter是css3的一个属性,Webkit率先支持了这几个功能,感觉效果很不错。下面咱们就学习一下filter这个属性吧。 现在...
  • flower46273736
  • flower46273736
  • 2016年07月11日 10:29
  • 2482

vedyna light的使用

  • 2012年09月15日 09:52
  • 2.59MB
  • 下载

CSS 进阶篇

一、编写 CSS 注意事项1. 修饰选择器(尽量少用)能写.nav{}就尽量不要写ul.nav{}。过分修饰选择器将影响性能,影响 class 复用性,会增加选择器私有度。这些都应当竭力避免的。 如...
  • hanshileiai
  • hanshileiai
  • 2015年08月09日 22:16
  • 1421
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:巧用CSS的Light滤镜
举报原因:
原因补充:

(最多只允许输入30个字)