`

CSS+JavaScript打造鼠标悬停图片渐显效果！

CSSJavaScript脚本XHTMLHTML 
阅读更多
我们在上网的时候，常常会见到一种图片渐显的效果：在正常状态下，图片呈低透明的状态，即透明度比较低看上去是一种朦胧的效果，而当鼠标移上去的时候，图片渐渐的显示的清晰起来。这样的效果是怎么做出来的呢，我们今天来看这个实例。
　　要实现这样的效果，仅是用CSS是完成不了的，需要通过JavaScript来进行控制。我们看下面的JavaScript脚本：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
functionhigh(which2){
theobject=which2
highlighting=setInterval("highlightit(theobject)",40)
}
functionlow(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=40
}
functionhighlightit(cur2){
if(cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=5
elseif(window.highlighting)
clearInterval(highlighting)
}

　　这段脚本实现了图片的渐渐显示的清晰。我们在插入图片的代码中，将图片的初始透明底设置的低一些，并设置鼠标事件，可以触动脚本的运行。看下面的代码：

div css xhtml xml Example Source Code Example Source Code [www.52css.com]
<imgonMouseOut=low(this)onMouseOver=high(this)src="http://www.52css.com/skins/logo3.gif"alt="www.52css.com"width="200"height="90"/>
下面我们看css样式表：
<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;
filter: Alpha(Opacity=20);
}
-->
</style>
文件源码：
<!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.52css.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;
border:1px solid #ccc;
}
#outer a:hover {border:1px dashed #c00;}
#outer img {
display:block;
border:none;
background:#069;
filter: Alpha(Opacity=20);
}
-->
</style>
</head>
<body>
<h1>将鼠标移至图片，将看到此效果。</h1>
<p id="outer"><a href="http://www.52css.com/"><img onMouseOut=low(this) onMouseOver=high(this) src="http://www.52css.com/skins/logo3.gif" alt="www.52css.com" width="200" height="90" /></a>
</p>
</body>
</html>
分享到：
| 大型Web2.0站点构建技术初探
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics