点击查看 实例效果
代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>www.imjqy.com</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;
}
#outer a:hover {}
#outer img {display:block;border:none;background:#069;}
–>
</style>
</head>
<body>
<h1>将鼠标移至图片，将看到此效果。</h1>
<p id=”outer”><a href=”http://www.imjqy.com/”><img onMouseOut=low(this) onMouseOver=high(this) style=’FILTER: alpha(opacity=20)’ src=”http://www.imjqy.com/wp-content/themes/cavano/images/logo.gif” alt=”www.imjqy.com” width=”200″ height=”90″ /></a>
</p>
</body>
</html>
原创文章，转载请注明： 转载自焦秋野 | 关注网站设计,前端资讯,用户体验,SEO,网站设计
本文链接地址: js鼠标悬停图片渐变
这方法好老啊。呵呵。
这个效果FF下没效果呢。
对了，帮更新一下我的链接地址啊，【蛋壳游记】改成：http://www.198551.com 了，呵呵