根据鼠标放上切换内容制作的图片导航

最新推荐文章于 2019-03-03 14:05:33 发布

JavaWeb-FaceStrap

最新推荐文章于 2019-03-03 14:05:33 发布

阅读量331

点赞数

分类专栏：其他类别

本文链接：https://blog.csdn.net/qq_35546160/article/details/51879431

版权

其他类别专栏收录该内容

50 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript实现的鼠标悬停时平滑切换图片透明度的效果。通过设置图片初始透明度为0，在鼠标移入时逐渐增加透明度至100%，并在鼠标移出时逐渐降低透明度回0%。此效果适用于网站中需要展示额外图片或信息的场景。

摘要由CSDN通过智能技术生成

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>鼠标放上切换内容</title>
<style>

</style>
<SCRIPT language=JavaScript>
function makevisible(cur,which){
if (which==0)
cur.filters.alpha.opacity=100
else
cur.filters.alpha.opacity=0
}
</SCRIPT>
<SCRIPT language=javascript>
var min=0;
var max=100;
var number=5;
function OnMouseOver(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("add("+obj.id+")",1);
}
function OnMouseOut(obj){
if(obj.changing)
clearInterval(obj.changing);
obj.changing=setInterval("sub("+obj.id+")",1);
}
function add(obj){
if(obj.filters.Alpha.Opacity > max){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = max;
}
else
obj.filters.Alpha.Opacity += number;
}
function sub(obj){
if(obj.filters.Alpha.Opacity < min){
clearInterval(obj.changing);
obj.changing=false;
obj.filters.Alpha.Opacity = min;
}
else
obj.filters.Alpha.Opacity += -number;
}
</SCRIPT>
</head>
<body>
<div class="imdiv" style="background:url(a1.gif) no-repeat;">
<a href="#"><IMG id='img1' οnmοuseοver='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' οnmοuseοut='OnMouseOut(this)' src='a2.gif'></a>
</div>
<div class="imdiv" style="background:url(b1.gif) no-repeat;">
<a href="#"><IMG id='img2' οnmοuseοver='OnMouseOver(this)' style='FILTER: Alpha(Opacity=0)' οnmοuseοut='OnMouseOut(this)' src='b2.gif'></a>
</div>
</body>
</html>