简单滑动下拉列表

最新推荐文章于 2021-11-08 13:37:28 发布

weixin_30832143

最新推荐文章于 2021-11-08 13:37:28 发布

阅读量275

点赞数

原文链接：http://www.cnblogs.com/xiaohaishuangyu/p/6020886.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}

.wrap {
width: 1000px;
height: 800px;
margin: 100px auto 0;

/*background-image: url(imgs/9.jpg);*/
background-color: skyblue;
padding-left: 100px;
}

.wrap li {
float: left;
width: 280px;
height: 30px;

padding: 10px;

position: relative;
}

.wrap a {
color: black;
text-decoration: none;
display: block;
width: 280px;
/*height: 60px;*/
text-align: center;
line-height: 30px;
color: white;
margin-top: 10px;

background-color: blue;
}

.wrap li ul {
position: absolute;
display: none;
}

.wrap img{
padding: 20px 0 0 0;
width: 200px;
height: 180px;
/*margin-top: 20px;*/
margin-left: 40px;

}

.photo1,.photo2{

width: 900px;
height: 800px;
margin-top: -36px;

}
.photo1{

background-image: url(imgs/10.jpg);
display: none;
}

.photo2{

background-image: url(imgs/11.jpg);
display: none;
}

</style>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {

$(".wrap li").hover(function () {
$(this).children("ul").slideToggle();
});

$(".button1").click(function(){

$(".photo1").toggle();

$(".photo2").hide();

});

$(".button2").click(function(){

$(".photo2").toggle();

$(".photo1").hide();

});

});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="#">静态逗逼图</a>
<ul>
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">

</ul>
</li>
<li>
<a href="#">动态逗逼图1</a>
<ul>
<img src="imgs/3.jpg">
<img src="imgs/4.jpg">
<img src="imgs/6.gif">
</ul>
</li><li>
<a href="#">动态逗逼图二</a>
<ul>
<img src="imgs/5.jpg">
<img src="imgs/7.jpg">
<img src="imgs/8.gif">
</ul>
</li>
</ul>
<button type="button" class="button1">切换背景1</button>
<button type="button" class="button2">切换背景2</button>


<div class="photo1"></div>
<div class="photo2"></div>

</div>
</body>
</html>

转载于:https://www.cnblogs.com/xiaohaishuangyu/p/6020886.html

weixin_30832143

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单滑动下拉列表

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; }...
复制链接

扫一扫