JavaScript改变图片透明度，鼠标放上渐渐显示_图片特效特效

JavaScript改变图片透明度，当我们把鼠标放到图片上的时候，图片的透明度慢慢变大，图片越来越清淅，也就是大家常说的图片渐变，淡入淡出效果，并能适时显示透明度的变化情况，支持多张图片。用本物资做一个图片导航应该很不错。

<title>JavaScript改变图片透明度</title>
<script language="JavaScript"> 
function makevisible(cur,which){ 
if (which==0) 
cur.filters.alpha.opacity=100 
else 
cur.filters.alpha.opacity=20 
} 
</script>
<script language="javascript">
var min=10;
var max=100;
var number=1;
function OnMouseOver(obj)
{
  if(obj.changing)
    clearInterval(obj.changing);
  obj.changing=setInterval("add("+obj.id+")",10);
}
function OnMouseOut(obj)
{
  if(obj.changing)
    clearInterval(obj.changing);
  obj.changing=setInterval("sub("+obj.id+")",10);
}
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;
  test1.innerText = "img1:"+img1.filters.Alpha.Opacity;
  test2.innerText = "img2:"+img2.filters.Alpha.Opacity;
}
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;
  test1.innerText = "img1:"+img1.filters.Alpha.Opacity;
  test2.innerText = "img2:"+img2.filters.Alpha.Opacity;
}
</script>
<img id='img1' src="http://p1.mb5u.com/texiao/1/20110225160500261.jpg" style="filter:Alpha(Opacity=10)" onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)">
<img id='img2' src="http://p1.mb5u.com/texiao/1/20110225160500262.jpg" style="filter:Alpha(Opacity=10)" onmouseover="OnMouseOver(this)" onmouseout="OnMouseOut(this)">
<div id='test1'>img1:10</div>
<div id='test2'>img2:10</div>

所属频道：图片特效特效/更新时间：2012-12-06

[收藏][报错][返回列表]

JavaScript改变图片透明度，鼠标放上渐渐显示_图片特效特效

图片特效特效Rss订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些