分享
 
 
 

用CSS实现鼠标单击特效

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

如果你能很好地应用CSS,那么你的主页将被打扮得很靓。下面就给大家介绍用CSS做出的一个鼠标单击特殊效果图。

1、将下面的代码复制到你的主页中和之间。

〈STYLE〉.shadow {

FILTER: shadow(color=blue,direction=225)

}

.shadow1 {

FILTER: shadow(color=red,direction=225)

}

.shadow2 {

FILTER: shadow(color=green,direction=225)

}

.div {

CURSOR: move; FILTER: blur(add=ture,direction=135,strength=10); WIDTH: 800px

}

〈/STYLE〉

在这里应用的是blur滤镜。

2、在页面中插入一张图片,比如我插入是〈img border="0" src="file:///F:/hbg/图象/校园/武测美景/广场夜景.jpg" width="300" height="210"〉。在其前加入〈TD id=flttgt style="filter: light(enabled=1),'width 300'" width=315〉。

在刚才我们插入图片下一行中加入〈TD style="VERTICAL-ALIGN: top" width=314〉

3、在设置了图片属性后,我们还要应用JavaScript脚本代码,也就是使图片跟随鼠标移动一些特效,代码如下。

〈SCRIPT language=JavaScript〉

〈!--

var g_numlights=0;

var blurbs= new Array(" 现在的动态滤镜赋予了网页更多的交互性能来响应用户的动作。"," 我们使用了光源滤镜来响应用户的点击。点击图片可以增加光源。"," 通过捕捉用户鼠标位置的方法来移动光源。"," 不需要太多的编程。");

window.onload=setlights;

document.onclick=keyhandler;

flttgt.onmousemove=mousehandler;

function setlights(){

flttgt.filters[0].clear();

flttgt.filters[0].addcone(0,0,5,100,100,225,225,0,60,15);

if (g_numlights>0){

flttgt.filters[0].addcone(400,170,5,100,100,225,0,0,160,15);

if (g_numlights>1){

flttgt.filters[0].addcone(320,330,5,100,100,0,225,225,60,15);

}

}

}

function keyhandler()

{

g_numlights=(g_numlights+=1)%4;

holder.innerHTML=blurbs[g_numlights];

setlights();

}

function mousehandler()

{

x=(window.event.x-80);

y=(window.event.y-80);

flttgt.filters[0].movelight(1,x,y,5,1);

if(g_numlights>0){

flttgt.filters[0].movelight(1,x,y,5,1);

if(g_numlights>1)

{

flttgt.filters[0].movelight(2,x,y,5,1);

}

}

}

〈/SCRIPT〉

这样就设置好一个比较有个性的图片特效,效果如图1所显示。

图1

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有