jS怎么写一个鼠标移到当前位置显示对应的图片
大家帮我看看js部分我想实现鼠标移到<手机端><电子商务><生活服务><手游应用>显示下面#dxdx里面的img图片移入显示移出隐藏<script>window.onlo...
大家帮我看看js部分 我想实现鼠标移到 <手机端> <电子商务> <生活服务> <手游应用>显示下面#dxdx里面的img图片 移入显示 移出隐藏
<script> window.onload=function() { var dx=document.getElementById("dx"); var dxx=dx.getElementsByTagName("dx-1"); var dxdx=document.getElementById("dxdx"); var dxdxx=dxdx.getElementsByTagName("img"); for(var i = 0;i<dxx.length;i++){ dxx[i].id = i; dxx[i].onmouseover = function(){ for(var j = 0;j<dxdxx.length;j++){ dxdxx[j].className = ""; dxx[j].style.display = "none"; }// this.className = "gao"; dxx[this.id].style.display ="block"; } } }; </script></head><body><div class="dx" id="dx"> <ul> <li> <div class="dx-1"><img src="img/aa.png"><br/><br/>手机端</div> <div class="dx-1"><img src="img/bb.png"><br/><br/>电子商务</div> <div class="dx-1"><img src="img/cc.png"><br/><br/>生活服务</div> <div class="dx-1"><img src="img/dd.png"><br/><br/>手游应用</div> </li> </ul></div><div class="dxdx" id="dxdx"> <ul> <li> <img style="display: block;" src="img/aa-1.png"> <img src="img/bb-1.png"> <img src="img/cc-1.png"> <img src="img/dd-1.png"> </li> </ul></div></body></html> 展开
<script> window.onload=function() { var dx=document.getElementById("dx"); var dxx=dx.getElementsByTagName("dx-1"); var dxdx=document.getElementById("dxdx"); var dxdxx=dxdx.getElementsByTagName("img"); for(var i = 0;i<dxx.length;i++){ dxx[i].id = i; dxx[i].onmouseover = function(){ for(var j = 0;j<dxdxx.length;j++){ dxdxx[j].className = ""; dxx[j].style.display = "none"; }// this.className = "gao"; dxx[this.id].style.display ="block"; } } }; </script></head><body><div class="dx" id="dx"> <ul> <li> <div class="dx-1"><img src="img/aa.png"><br/><br/>手机端</div> <div class="dx-1"><img src="img/bb.png"><br/><br/>电子商务</div> <div class="dx-1"><img src="img/cc.png"><br/><br/>生活服务</div> <div class="dx-1"><img src="img/dd.png"><br/><br/>手游应用</div> </li> </ul></div><div class="dxdx" id="dxdx"> <ul> <li> <img style="display: block;" src="img/aa-1.png"> <img src="img/bb-1.png"> <img src="img/cc-1.png"> <img src="img/dd-1.png"> </li> </ul></div></body></html> 展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
</title>
<style>
ul{
display:block;
list-style:none;
width:300px;
height:200px;
border:1px solid black;
}
li div,li img{
float:left;
}
li>img{
display:none;
}
</style>
<script>
onload=function()
{
var dx=document.getElementById("dx");
var dxdx=document.getElementById("dxdx");
var imgs1=dx.getElementsByTagName("img");
var imgs2=dxdx.getElementsByTagName("img");
var last = 0;
for(var i =0;i<imgs1.length;i++){
(function(i){
imgs1[i].onmouseover=function(){
imgs2[last].style.display="none";
imgs2[i].style.display="block";
last=i;
}
})(i);
}
}
</script>
</head>
<body>
<div class="dx" id="dx">
<ul>
<li>
<div class="dx-1"><img src="img/aa.png"><br/><br/>手机端</div>
<div class="dx-1"><img src="img/bb.png"><br/><br/>电子商务</div>
<div class="dx-1"><img src="img/cc.png"><br/><br/>生活服务</div>
<div class="dx-1"><img src="img/dd.png"><br/><br/>手游应用</div>
</li>
</ul>
</div>
<div class="dxdx" id="dxdx">
<ul>
<li>
<img style="display: block;" src="img/aa-1.png">
<img src="img/bb-1.png">
<img src="img/cc-1.png">
<img src="img/dd-1.png">
</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
