手风琴JQ滑动特效
1.效果预览:
![手风琴图片和钢琴导航栏JQ滑动特效-LMLPHP]( "手风琴图片和钢琴导航栏JQ滑动特效-LMLPHP")
2.相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.out {
width: 1700px;
height: 240px;
overflow: hidden;
margin: 0 auto;
}
.clear {
clear: both;
}
img {
width: 600px;
height: 240px;
}
.first {
margin-left: 0px;
}
.out2 {
width: 1200px;
height: 240px;
margin: 0 auto;
overflow: hidden;
border: 1px solid red;
}
ul li{
width: 240px;
height: 240px;
list-style: none;
float: left;
}
</style>
</head>
<body>
<div class="out2">
<div class="out">
<ul>
<li> <img class="first" src="xiaomi/1.jpg"/></li>
<li><img src="image/2.jpg"></li>
<li><img src="image/3.jpg"></li>
<li> <img src="image/4.jpg"></li>
<li> <img src="image/5.jpg"></li>
</ul>
</div>
</div>
<script>
var $lis = $("ul li");
$lis.mouseenter(function () {
$(this).stop().animate({width: 600},200).siblings().stop().animate({width:150},200);
})
$("div.out2").mouseleave(function () {
$lis.stop().animate({width: 240},200);
})
</script>
</body>
</html>
钢琴导航栏
1.演示效果
![手风琴图片和钢琴导航栏JQ滑动特效-LMLPHP]( "手风琴图片和钢琴导航栏JQ滑动特效-LMLPHP")
2.相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1/jquery-1.9.1/jquery.js"></script>
<style>
ul {
height: 80px;
overflow: hidden;
}
ul > li {
width: 200px;
height: 160px;
/*background-color: black;*/
color: white;
float: left;
list-style: none;
text-align: center;
line-height: 80px;
border: 0.5px solid red;
}
ul > li .inner {
width: 200px;
height: 80px;
background-color: black;
}
span.huang {
width: 200px;
height: 80px;
display: block;
background-color: orange;
float: left;
position: relative;
}
.out {
margin-top: -80px;
background-color: black;
z-index: -2;
}
.wenzi {
display: block;
position: relative;
color: white;
z-index: 999;
cursor: pointer;
}
</style>
</head>
<body>
<ul>
<li><span class="wenzi">所有手机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
<li><span class="wenzi">所有配件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
<li><span class="wenzi">电视机</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
<li><span class="wenzi">笔记本</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
<li><span class="wenzi">路由器</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
<li><span class="wenzi">智能硬件</span><div class="out"><div class="inner"></div><span class="huang"></span></div></li>
</ul>
<script>
$(function () {
$("ul li").mouseenter(function () {
$(this).children(".out").children(".inner").stop().slideUp();
})
$("ul li").mouseleave(function () {
$(this).children(".out").children(".inner").slideDown();
})
})
</script>
</body>
</html>