jQuery案例

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 上的一个

效果展示：