您的位置：首页 > 其它

鼠标滑过选项卡切换图片

2016-04-05 00:00 351 查看
摘要: 鼠标划过选项卡时自动切换图片


<!DOCTYPE  HTML>

<html>
<head>
<meta  charset="utf-8">
<title>鼠标滑过选项卡切换图片</title>
<style>
input{background:white;}
.active{background:red;}
div{
width:300px;
height:200px;
background:gray;
margin-bottom:10px;
display:none;

}

</style>
<script>
window.onload=function  ()
{
var   oInput=document.getElementsByTagName('input');
var   oDiv=document.getElementsByTagName('div');
var  i=0;
for(i=0;i<oInput.length;i++)
{
oInput[i].index=i
oInput[i].onmouseover=function  ()
{
for(i=0;i<oInput.length;i++)
{
oInput[i].style.background="none";
oDiv[i].style.display="none";
}
this.style.background="red";
oDiv[this.index].style.display="block";
}

}
}
</script>

</head>
<body>
<input    class="active"  type="button"    value="按钮1">
<input     type="button"    value="按钮2">
<input    type="button"    value="按钮3"  >
<div   style="display:block">
<img  src="./images/u=1259803343,3860580242&fm=11&gp=0.jpg"  width='300px'  height='200px'  title=""   alt=""  />
</div>
<div>
<img  src="./images/u=1491680822,4259060158&fm=21&gp=0.jpg"  width='300px'  height='200px' title=""   alt=""  />
</div>
<div>
<img  src="./images/u=2092545718,2399576582&fm=21&gp=0.jpg"  width='300px'  height='200px' title=""   alt=""  />
</div>

</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                鼠标划过
                                                选项卡
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航