中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计  虚拟主机 域名注册 acg王国 ACG玩家
求创科技
网站建设
中国福网
招聘求职
中国互联
艺魂宝库网
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS:Light滤镜

CSS:Light滤镜 (1)

来源:中国设计秀    作者:    点击:395     加入收藏
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 >
0
顶一下
[1] [2]
2007-10-22 12:32:00    出处:
Google
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口