如果你能很好地應(yīng)用CSS,那么你的主頁(yè)將被打扮得很靚。下面就給大家介紹用CSS做出的一個(gè)鼠標(biāo)單擊特殊效果圖。
1、將下面的代碼復(fù)制到你的主頁(yè)中和之間。
〈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〉
在這里應(yīng)用的是blur濾鏡。
2、在頁(yè)面中插入一張圖片,比如我插入是〈img border="0" src="/Article/UploadPic/2005-9/200598478474.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、在設(shè)置了圖片屬性后,我們還要應(yīng)用Javascript腳本代碼,也就是使圖片跟隨鼠標(biāo)移動(dòng)一些特效,代碼如下。
〈script language=Javascript〉
〈!--
var g_numlights=0;
var blurbs= new Array(" 現(xiàn)在的動(dòng)態(tài)濾鏡賦予了網(wǎng)頁(yè)更多的交互性能來響應(yīng)用戶的動(dòng)作。"," 我們使用了光源濾鏡來響應(yīng)用戶的點(diǎn)擊。點(diǎn)擊圖片可以增加光源。"," 通過捕捉用戶鼠標(biāo)位置的方法來移動(dòng)光源。"," 不需要太多的編程。");
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〉
這樣就設(shè)置好一個(gè)比較有個(gè)性的圖片特效
您可能感興趣的文章:- 保存幾個(gè)不錯(cuò)的css特效字
- 用CSS實(shí)現(xiàn)文字變圖象特效
- DIV+CSS實(shí)現(xiàn)的滑動(dòng)門菜單特效代碼
- 精心挑選的15款優(yōu)秀jQuery 本特效插件和教程
- jquery淡化版banner異步圖片文字效果切換圖片特效
- jQuery實(shí)現(xiàn)Twitter的自動(dòng)文字補(bǔ)齊特效
- 基于jQuery實(shí)現(xiàn)的文字按鈕表單特效整理
- jQuery 和 CSS 的文本特效插件集錦