六合开奖结果现场直播欢迎诸位!收藏本站注 册登 陆
常用三肖中特马:基础知识网络知识操作系统WPS网页制作数据库算法网页成功之路网络安全最新技术古典mid流行midmid背景下载中心
您现在的位置:首页 > 三肖中特马 > 文章页

js实现图片切换效果渐隐渐显

Admin | 2015-4-15 10:34:53 | ReadNums | 1803 | 标签 网页制作 | 打印本页
     

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>图片渐隐渐显的切换效果</title> 
<script type="text/javascript"> 
window.onload = function() 

    var testDiv = document.getElementById('test'); 
    testDiv.style.opacity = 1.0; 
    testDiv.onmouseover = show; 
    testDiv.onmouseout = hide; 
}; 
var interval1, interval2; 
var show = function() 

    if(interval2) { 
         //这里是为了当鼠标在Div渐隐的过程中移到Div上图片立即慢慢重现 
        clearInterval(interval2); 
    } 
    i = document.getElementById('test').style.opacity*100; 
    interval1 = setInterval("showRound()",20); 
}; 
var showRound = function() 

    i++; 
    var testDiv = document.getElementById('test'); 
    if(testDiv.style.opacity != 1.0) { 
        testDiv.style.opacity = i/100; 
    } else { 
        if(interval1) { 
            clearInterval(interval1); 
        } 
    } 

var hide = function() 

    if(interval1) { 
         //这里是为了当鼠标在Div渐现的过程中从Div上移走图片立即慢慢消失 
        clearInterval(interval1); 
    } 
    j = document.getElementById('test').style.opacity*100; 
    interval2 = setInterval("hideRound()",20); 
}; 
var hideRound = function() 

    j--; 
    var testDiv = document.getElementById('test'); 
    if(testDiv.style.opacity != 0.0) { 
        testDiv.style.opacity = j/100; 
    } else { 
        if(interval2) { 
            clearInterval(interval2); 
        } 
    } 
}; 
</script> 
</head> 
 
<body> 
<div id="test" style="width:300px; height:250px"> 
<iframe scrolling="no" width="300" height="250" frameborder="0" src="<span>https://hi.csdn.net/attachment/201111/15/0_1321345637630X.gif</span><a href="#"></a>"></iframe> 
</div> 
</body> 


问题未解决:在线咨询我要在线咨询问题

凤凰天机玄机图资料

(访客)
内容实用原创,讲得很好。
20xx年x月x日
(站长)
有问题请在线咨询。
20xx年x月x日