CSS 정적 필터 A:호버 효과 페이지 1/3_javascript 기술
- PHP中文网원래의
- 2016-05-16 19:13:021552검색
IE Only
1단계:
<!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> 그런 다음 JS의 마지막 두 줄을 일치시켜 이렇게 만듭니다.
Still IE Only
2단계:
<!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>계속 열심히 해보고 자기효과도 추가해 보세요...오랜동안 테스트하다 보면 어지러움을 느끼실 겁니다...
3단계:
<!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>이전 효과 마우스를 너무 빠르게 움직이면, 어지러울 텐데...
자석 효과를 하나 더 만들어 봤습니다
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>그런 다음 알려지지 않은 특수 효과를 추가하여 이 동동을 좀 역동적으로 만들었습니다. 동적 광파, BBBBB...) -_-
5단계: (영원히 IE 전용)
<!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>성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.