js鼠标点击事件出现图片 10
鼠标移入时，在显示的菜单上点击任何一个li出现相应的图片如果点击图片，图片消失……这个功能怎么实现啊<!DOCTYPEHTML><html><head><metachar...
鼠标移入时，在显示的菜单上
点击任何一个 li
出现相应的图片
如果点击图片，
图片消失……
这个功能怎么实现啊
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
ul { margin:0; padding:0; }
li { list-style:none; }
.lis { width:200px; height:30px; border:1px solid #333; position:relative; }
.link { height:30px; line-height:30px; text-align:center; display:block; }
.lis ul { width:240px; height:1px; overflow:hidden;/*溢出隐藏*/ border:1px solid #333; background:yellow; position:absolute; top:30px; left:-1px; line-height:24px; opacity:0;/* 透明度 */ transition:0.3s; }
.lis ul li { text-indent:10px; border-bottom:1px solid #333; }
</style>
</head>
<body>
<ul>
<li id="lis"
onmouseover="//移入
ul1.style.opacity = 1;
ul1.style.height = '124px';
"
onmouseout="//移出
ul1.style.opacity = 0;
ul1.style.height = '1px';
"
onmouseclick="//点击
lis.
"
class="lis">
<a class="link" href="#">应用</a>
<ul id="ul1">
<li>帅锅1</li>
<li>风景2</li>
<li>好吃的3</li>
<li>好玩的4</li>
<li>放假了5</li>
</ul>
</li>
</ul>
<script>
var lis = document.getElementById('lis')
var ul = document.getElementById('ul1')
li.onmouseclick = show;
</script>
</body>
</html>
插入到这个程序中 展开
点击任何一个 li
出现相应的图片
如果点击图片，
图片消失……
这个功能怎么实现啊
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
ul { margin:0; padding:0; }
li { list-style:none; }
.lis { width:200px; height:30px; border:1px solid #333; position:relative; }
.link { height:30px; line-height:30px; text-align:center; display:block; }
.lis ul { width:240px; height:1px; overflow:hidden;/*溢出隐藏*/ border:1px solid #333; background:yellow; position:absolute; top:30px; left:-1px; line-height:24px; opacity:0;/* 透明度 */ transition:0.3s; }
.lis ul li { text-indent:10px; border-bottom:1px solid #333; }
</style>
</head>
<body>
<ul>
<li id="lis"
onmouseover="//移入
ul1.style.opacity = 1;
ul1.style.height = '124px';
"
onmouseout="//移出
ul1.style.opacity = 0;
ul1.style.height = '1px';
"
onmouseclick="//点击
lis.
"
class="lis">
<a class="link" href="#">应用</a>
<ul id="ul1">
<li>帅锅1</li>
<li>风景2</li>
<li>好吃的3</li>
<li>好玩的4</li>
<li>放假了5</li>
</ul>
</li>
</ul>
<script>
var lis = document.getElementById('lis')
var ul = document.getElementById('ul1')
li.onmouseclick = show;
</script>
</body>
</html>
插入到这个程序中 展开
2个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>last.html</title>
<style>
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.lis {
width: 200px;
height: 30px;
border: 1px solid #333;
position: relative;
}
.link {
height: 30px;
line-height: 30px;
text-align: center;
display: block;
}
.lis ul {
width: 240px;
height: 124px;
display: none;
overflow: hidden;
border: 1px solid #333;
background: yellow;
position: absolute;
top: 30px;
left: -1px;
line-height: 24px;
opacity: 1;
transition: 0.3s;
}
.lis ul li {
text-indent: 10px;
border-bottom: 1px solid #333;
}
</style>
<script>
window.onload = function ()
{
var lis = document.getElementById ('lis');
var ul = document.getElementById ('ul1');
var ul_lis = ul.getElementsByTagName ('li');
lis.onmouseover = function ()
{
if (parseFloat (ul.style.height) <= 0)
{
ul.style.height = '124px';
for ( var i = 0; i < ul_lis.length; i++)
{
ul_lis[i].style.display = 'block';
}
}
ul.style.display = 'block';
}
lis.onmouseout = function ()
{
ul.style.display = 'none';
}
for ( var i = 0; i < ul_lis.length; i++)
{
ul_lis[i].onclick = function ()
{
this.style.display = 'none';
var h = ul.clientHeight - 124 / ul_lis.length < 0 ? 0 : ul.clientHeight - 124 / ul_lis.length;
ul.style.height = h + 'px';
}
}
}
</script>
</head>
<body>
<ul>
<li id="lis" class="lis"><a class="link" href="#">应用</a>
<ul id="ul1">
<li>帅锅1</li>
<li>风景2</li>
<li>好吃的3</li>
<li>好玩的4</li>
<li>放假了5</li>
</ul></li>
</ul>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>last.html</title><style>ul { margin: 0; padding: 0;} li { list-style: none;} .lis { width: 200px; height: 30px; border: 1px solid #333; position: relative;} .link { height: 30px; line-height: 30px; text-align: center; display: block;} .lis ul { width: 240px; height: 124px; display: none; overflow: hidden; border: 1px solid #333; background: yellow; position: absolute; top: 30px; left: -1px; line-height: 24px; opacity: 1; transition: 0.3s;} .lis ul li { text-indent: 10px; border-bottom: 1px solid #333;}</style><script> window.onload = function () { var lis = document.getElementById ('lis'); var ul = document.getElementById ('ul1'); var ul_lis = ul.getElementsByTagName ('li'); lis.onmouseover = function () { if (parseFloat (ul.style.height) <= 0) { ul.style.height = '124px'; for ( var i = 0; i < ul_lis.length; i++) { ul_lis[i].style.display = 'block'; } } ul.style.display = 'block'; } lis.onmouseout = function () { ul.style.display = 'none'; } for ( var i = 0; i < ul_lis.length; i++) { ul_lis[i].onclick = function () { this.style.display = 'none'; var h = ul.clientHeight - 124 / ul_lis.length < 0 ? 0 : ul.clientHeight - 124 / ul_lis.length; ul.style.height = h + 'px'; } } }</script></head><body> <ul> <li id="lis" class="lis"><a class="link" href="#">应用</a> <ul id="ul1"> <li>帅锅1</li> <li>风景2</li> <li>好吃的3</li> <li>好玩的4</li> <li>放假了5</li> </ul></li> </ul></body></html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
