鼠标悬停图片渐显效果(CSS+JS)
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zhumeng.org</title>
<script language=javascript1.2>
<!--
function high(which2){
theobject=which2
highlighting=setinterval("highlightit(theobject)",40)
}
function low(which2){
clearinterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearinterval(highlighting)
}
//-->
</script>
<style type="text/css">
<!--
h1 {text-align:center;margin-top:50px;}
p#outer {
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #ccc;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
-->
</style>
</head>
<body>
<h1>将鼠标移至图片，将看到此效果。</h1>
<p id="outer"><a href="http://www.zhumeng.org/"><img onmouseout=low(this) onmouseover=high(this) style='filter: alpha(opacity=20)' src="/bbs/upload/2006/04/19/135128.jpg" alt="www.zhumeng.org" width="200" height="90" /></a>
</p>
</body>
</html> 效果如下：
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>www.zhumeng.org</title>
<script language=javascript1.2>
<!--
function high(which2){
theobject=which2
highlighting=setinterval("highlightit(theobject)",40)
}
function low(which2){
clearinterval(highlighting)
which2.filters.alpha.opacity=40
}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
else if (window.highlighting)
clearinterval(highlighting)
}
//-->
</script>
<style type="text/css">
<!--
h1 {text-align:center;margin-top:50px;}
p#outer {
margin:0 auto;
width:202px;
}
#outer a {
margin:0px;
display:block;
position: relative;
border:1px solid #ccc;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {display:block;border:none;background:#069;}
-->
</style>
</head>
<body>
<h1>将鼠标移至图片，将看到此效果。</h1>
<p id="outer"><a href="http://www.zhumeng.org/"><img onmouseout=low(this) onmouseover=high(this) style='filter: alpha(opacity=20)' src="/bbs/upload/2006/04/19/135128.jpg" alt="www.zhumeng.org" width="768" height="576" /></a>
</p>
</body>
</html>
页:
[1]