masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

css静态滤镜 + A:Hover 效果第1/3页_javascript技巧

PHP中文网
Lepaskan： 2016-05-16 19:13:02
asal
1561 orang telah melayarinya

IE Only
Step1: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<!-- Author: Hutia --> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>WU XIN</title> 
<script type="text/javascript" src=""></script> 
<style> 
    * { margin:0px; padding:0px; } 
     
    .i1 { width:64px; border:0px none #888; margin:0px; } 
     
    .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } 
    .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; } 
    .a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;} 
    .a2 { border:1px solid #999; } .a2:hover { border:1px solid green; } 
    .a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;} 
    .a4 { border:1px solid #999; } .a4:hover { border:1px solid red;} 
    .a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;} 
    .a6 { border:1px solid #999; } .a6:hover { border:1px solid black;} 
    .a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;} 
</style> 
</head> 
<body> 
<div id=""> 
    <a href="#" class="a0 a1"> 
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> 
    <a href="#" class="a0 a2"> 
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> 
    <a href="#" class="a0 a3"> 
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> 
    <a href="#" class="a0 a4"> 
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> 
    <a href="#" class="a0 a5"> 
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> 
    <a href="#" class="a0 a6"> 
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> 
    <a href="#" class="a0 a7"> 
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> 
</div> 
</body> 
</html>
Salin selepas log masuk

然后配合上两行 JS, 做成这样
依然 IE Only
Step2: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<!-- Author: Hutia --> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>WU XIN</title> 
<script type="text/javascript"> 
/*  Author: Hutia  */ 
function chkScroll(obj){ 
    var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight; 
    obj.scrollTop=parseInt((y-y0)/h0*(h1-h0)); 
} 
</script> 
<style> 
    * { margin:0px; padding:0px; } 
     
    #main { height:198px; width:66px; overflow:hidden; } 
     
    .i1 { width:64px; border:0px none #888; margin:0px; } 
     
    .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } 
    .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; } 
    .a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;} 
    .a2 { border:1px solid #999; } .a2:hover { border:1px solid green; } 
    .a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;} 
    .a4 { border:1px solid #999; } .a4:hover { border:1px solid red;} 
    .a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;} 
    .a6 { border:1px solid #999; } .a6:hover { border:1px solid black;} 
    .a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;} 
</style> 
</head> 
<body> 
<div id="main" onmousemove="chkScroll(this);"> 
    <a href="#" class="a0 a1"> 
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> 
    <a href="#" class="a0 a2"> 
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> 
    <a href="#" class="a0 a3"> 
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> 
    <a href="#" class="a0 a4"> 
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> 
    <a href="#" class="a0 a5"> 
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> 
    <a href="#" class="a0 a6"> 
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> 
    <a href="#" class="a0 a7"> 
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> 
</div> 
</body> 
</html>
Salin selepas log masuk

继续努力，加上磁性效果............就是测试久了会看的头晕.......
Step3: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<!-- Author: Hutia --> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>WU XIN</title> 
<script type="text/javascript"> 
/*  Author: Hutia  */ 
function chkScroll(obj){ 
    var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight; 
    var sT=parseInt((y-y0)/h0*(h1-h0)); 
    var dif=sT+y-y0-33; 
    if(dif%66<12)sT-=dif%66; 
    if(dif%66>54)sT=sT-dif%66+66; 
    obj.scrollTop=sT; 
} 
</script> 
<style> 
    * { margin:0px; padding:0px; } 
     
    #main { height:198px; width:66px; overflow:hidden; } 
     
    .i1 { width:64px; border:0px none #888; margin:0px; } 
     
    .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } 
    .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; } 
    .a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;} 
    .a2 { border:1px solid #999; } .a2:hover { border:1px solid green; } 
    .a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;} 
    .a4 { border:1px solid #999; } .a4:hover { border:1px solid red;} 
    .a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;} 
    .a6 { border:1px solid #999; } .a6:hover { border:1px solid black;} 
    .a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;} 
</style> 
</head> 
<body> 
<div id="main" onmousemove="chkScroll(this);"> 
    <a href="#" class="a0 a1"> 
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> 
    <a href="#" class="a0 a2"> 
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> 
    <a href="#" class="a0 a3"> 
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> 
    <a href="#" class="a0 a4"> 
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> 
    <a href="#" class="a0 a5"> 
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> 
    <a href="#" class="a0 a6"> 
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> 
    <a href="#" class="a0 a7"> 
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> 
</div> 
</body> 
</html>
Salin selepas log masuk

上一个效果鼠标动的快了会很头晕.......
又做了一个磁性效果
Step4: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<!-- Author: Hutia --> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>WU XIN</title> 
<script type="text/javascript"> 
/*  Author: Hutia  */ 
function chkScroll(obj){ 
    var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight; 
    var sT=parseInt((y-y0)/h0*(h1-h0)); 
    if(sT%66<10)sT-=sT%66; 
    if(sT%66>56)sT=sT-sT%66+66; 
    obj.scrollTop=sT; 
} 
</script> 
<style> 
    * { margin:0px; padding:0px; } 
     
    #main { height:198px; width:66px; overflow:hidden; } 
     
    .i1 { width:64px; border:0px none #888; margin:0px; } 
     
    .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } 
    .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; } 
    .a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;} 
    .a2 { border:1px solid #999; } .a2:hover { border:1px solid green; } 
    .a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;} 
    .a4 { border:1px solid #999; } .a4:hover { border:1px solid red;} 
    .a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;} 
    .a6 { border:1px solid #999; } .a6:hover { border:1px solid black;} 
    .a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;} 
</style> 
</head> 
<body> 
<div id="main" onmousemove="chkScroll(this);"> 
    <a href="#" class="a0 a1"> 
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> 
    <a href="#" class="a0 a2"> 
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> 
    <a href="#" class="a0 a3"> 
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> 
    <a href="#" class="a0 a4"> 
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> 
    <a href="#" class="a0 a5"> 
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> 
    <a href="#" class="a0 a6"> 
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> 
    <a href="#" class="a0 a7"> 
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> 
</div> 
</body> 
</html>
Salin selepas log masuk

然后再加上一些不知所谓的特效，让这个东东有点动感（小新：看我的动感光波，BBBBB........） -_-
Step 5: （永远的 IE Only）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<!-- Author: Hutia --> 
<meta http-equiv="content-type" content="text/html; charset=gb2312" /> 
<title>WU XIN</title> 
<script type="text/javascript"> 
/*  Author: Hutia  */ 
function chkScroll(obj){ 
    var y0=obj.offsetTop, y=event.y, h0=obj.offsetHeight, h1=obj.scrollHeight, currentNode; 
    var sT=parseInt((y-y0)/h0*(h1-h0)); 
    var pT=document.getElementById("pointer"); 
     
    if(sT%66<10)sT-=sT%66; 
    if(sT%66>56)sT=sT-sT%66+66; 
    obj.scrollTop=sT; 
     
    currentNode=obj.children[parseInt((sT+y-y0)/66)]; 
    if(!currentNode)return; 
    with(pT.style){ 
        display="block"; 
        backgroundColor=currentNode.currentStyle.borderColor; 
        pT.baseY=top=currentNode.offsetTop-sT; 
        left=currentNode.offsetLeft+currentNode.offsetWidth+2; 
    } 
     
} 

function crazyPointer(){ 
    try{ 
        var pT=document.getElementById("pointer"); 
        if(isNaN(parseInt(pT.baseY)))pT.baseY=0; 
        if(isNaN(parseInt(pT.y)))pT.y=0; 
        if(isNaN(parseInt(pT.h)))pT.h=0; 
        if(isNaN(parseInt(pT.vy)))pT.vy=1; 
        if(isNaN(parseInt(pT.vh)))pT.vh=1; 
         
        pT.y+=pT.vy*parseInt(Math.random()*3); 
        if(pT.y>65){pT.y=65;pT.vy=-1;} 
        if(pT.y<0){pT.y=0;pT.vy=1;} 
         
        pT.h+=pT.vh*parseInt(Math.random()*7); 
        if(pT.y+pT.h>65){pT.h=65-pT.y;pT.vh=-1;} 
        if(pT.h<0){pT.h=1;pT.vh=1;} 
         
        pT.style.top=pT.baseY+pT.y; 
        pT.style.height=pT.h; 
    }catch(e){} 
    setTimeout(crazyPointer,10); 
} 

function hidePointer(){ 
    document.getElementById("pointer").style.display="none"; 
} 

crazyPointer(); 
</script> 
<style> 
    * { margin:0px; padding:0px; } 
     
    #main { height:198px; width:66px; overflow:hidden; } 
     
    #pointer { display:none; position:absolute; width:3px; overflow:hidden; } 
     
    .i1 { width:64px; border:0px none #888; margin:0px; } 
     
    .a0 { filter:Gray() Alpha(Opacity=40); display:block; height:64px; width:64px; } 
    .a0:hover, .a0:active { filter:Alpha(Opacity=100); display:block; height:64px; width:64px; } 
    .a1 { border:1px solid #999; } .a1:hover { border:1px solid gold;} 
    .a2 { border:1px solid #999; } .a2:hover { border:1px solid green; } 
    .a3 { border:1px solid #999; } .a3:hover { border:1px solid blue;} 
    .a4 { border:1px solid #999; } .a4:hover { border:1px solid red;} 
    .a5 { border:1px solid #999; } .a5:hover { border:1px solid silver;} 
    .a6 { border:1px solid #999; } .a6:hover { border:1px solid black;} 
    .a7 { border:1px solid #999; } .a7:hover { border:1px solid #FEE;} 
</style> 
</head> 
<body> 
<div id="main" onmousemove="chkScroll(this);" onmouseout="hidePointer();"> 
    <a href="#" class="a0 a1"> 
<img src="/articleimg/upload/2006/6/17/2620257_1_j.jpg" class="i1" /></a> 
    <a href="#" class="a0 a2"> 
<img src="/articleimg/upload/2006/6/17/2620257_2_m.jpg" class="i1" /></a> 
    <a href="#" class="a0 a3"> 
<img src="/articleimg/upload/2006/6/17/2620257_3_s.jpg" class="i1" /></a> 
    <a href="#" class="a0 a4"> 
<img src="/articleimg/upload/2006/6/17/2620257_4_h.jpg" class="i1" /></a> 
    <a href="#" class="a0 a5"> 
<img src="/articleimg/upload/2006/6/17/2620257_5_t.jpg" class="i1" /></a> 
    <a href="#" class="a0 a6"> 
<img src="/articleimg/upload/2006/6/17/2620257_6_yi.jpg" class="i1" /></a> 
    <a href="#" class="a0 a7"> 
<img src="/articleimg/upload/2006/6/17/2620257_7_ya.jpg" class="i1" /></a> 
</div> 

<div id="pointer"></div> 
</body> 
</html>
Salin selepas log masuk
Label berkaitan：
+ 效果
sumber：php.cn
Artikel sebelumnya：JS值当前DIV的ID值的代码_javascript技巧 Artikel seterusnya：JSON 学习之完全手册 图文_javascript技巧
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Lancarkan penyemak imbas telus untuk meningkatkan pengalaman aplikasi web dan PWA [menyokong HTML statik, CSS dan JavaScript] [membenarkan pengguna melihat kertas dinding desktop dalam aplikasi web/PWA kami] Saya seorang pembangun dan pereka bentuk hadapan junior yang sedang membangunkan aplikasi ...
daripada 2024-04-05 13:50:12
0
1
1367
Kelas baris CSS menjadikan elemen tertentu terkeluar daripada bingkai, manakala ia harus statik dan ditetapkan pada bahagian bawah paparan Halaman saya pada masa ini kelihatan seperti ini. Selepas menambah kelas baris supaya kedu...
daripada 2024-04-03 18:48:12
0
1
281
Tidak boleh menggunakan penapis CSS pada tuding dalam Safari Saya perhatikan bahawa membuat perubahan pada sifat penapis pada tuding menyebabkan tingka...
daripada 2024-04-01 08:19:51
0
1
387
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan