1、下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#father{
width: 100%;
text-align: center;
}
a{
text-decoration: none;
}
#father>ul{
list-style: none;
}
#father>ul>li{
display: inline-block;
background-color: pink;
width: 100px;
height: 25px;
text-align: center;
border-radius:5px;
border-bottom: 2px solid #f07c82;
}
#father>ul>li>ul{
display: none;
list-style: none;
padding: 0;
position: absolute;
}
#father>ul>li>ul>li{
padding-top: 5px;
background-color: #FFC0CB;
width: 100px;
height: 25px;
border-bottom: 2px solid #f07c82;
}
</style>
</head>
<body>
<div id="father">
<ul>
<li>
<a href="">一级菜单一号</a>
<ul>
<li><a href="">二级菜单1</a></li>
<li><a href="">二级菜单2</a></li>
<li><a href="">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="">一级菜单二号</a>
<ul>
<li><a href="">二级菜单1</a></li>
<li><a href="">二级菜单2</a></li>
<li><a href="">二级菜单3</a></li>
</ul>
</li>
<li>
<a href="">一级菜单三号</a>
<ul>
<li><a href="">二级菜单1</a></li>
<li><a href="">二级菜单2</a></a></li>
<li><a href="">二级菜单3</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#father>ul>li').mouseenter(function(){
//stop() 方法停止当前正在运行的动画。解决当触发后立即移除鼠标,被触发的事件还再进行
$(this).children('ul').stop(true,false).slideDown(400);//show()
})
$('#father>ul>li').mouseleave(function(){
$(this).children('ul').stop(true,false).slideUp(200);//hide()
})
})
</script>
stop(stopAll,goToEnd)方法:
stop() | 等价于 stop(false, false),仅停止当前动画,后面的动画还可以继续执行 |
stop(true) | 等价于 stop(true, false),停止当前动画,并且停止后面的动画 |
stop(true, true) | 当前动画继续执行,只停止后面的动画 |
stop(false, true) | 停止当前动画,跳到最后一个动画,并且执行最后一个动画 |
执行效果:
2、爱豆选择(原淘宝案例)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
a{
text-decoration: none;
color: salmon;
}
#center li a{
display: block;
}
#wrapp{
width: 900px;
height: 510px;
margin: 0 auto;
overflow: hidden;//溢出隐藏!
}
#left>li,#right>li{
width: 140px;
height: 100px;
border: 1px solid pink;
text-align: center;
line-height: 100px;
}
#left{
float: left;
}
#right{
float: right;
}
#center{
/* margin-left: 140px; */
width: 615px;
height: 510px;
display: inline-block;
background-image: url(EXO1.jpg);
background-size: 615px 510px;
background-repeat: no-repeat;
background-position:center;
}
</style>
</head>
<body>
<div id="wrapp">
<ul id="left">
<li><a href="">金俊勉</a></li>
<li><a href="">金珉锡</a></li>
<li><a href="">金钟仁</a></li>
<li><a href="">金钟大</a></li>
<li><a href="">都暻秀</a></li>
</ul>
<ul id="center">
<li><a href=""><img src="./image1/SUHO01.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/xiumin1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/kai1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/chen1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/do1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/bk1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/lay1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/吴世勋.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/c1.jpg" width="615" height="510"/></a></li>
<li><a href=""><img src="./image1/woodz1.jpg" width="615" height="510"/></li>
</ul>
<ul id="right">
<li><a href="">边伯贤</a></li>
<li><a href="">张艺兴</a></li>
<li><a href="">吴世勋</a></li>
<li><a href="">朴灿烈</a></li>
<li><a href="">曹承衍</a></li>
</ul>
</div>
</body>
</html>
<script src="jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('#left>li').mouseenter(function(){
var idx=$(this).index();
$('#center>li').eq(idx).show().siblings('li').hide();
})
$('#right>li').mouseenter(function(){
var idx=$(this).index();
idx+=4;
$('#center>li').eq(idx).show().siblings('li').hide();
})
})
</script>
eq() 方法将匹配元素集缩减值指定 index 上的一个
效果展示: