手风琴 html+css+jquery

最新推荐文章于 2024-09-22 20:36:19 发布

原创最新推荐文章于 2024-09-22 20:36:19 发布 · 505 阅读

CC 4.0 BY-SA版权

本文详细阐述了网页布局和交互设计的实现方法，通过CSS样式和JavaScript事件，展示了如何创建响应式、美观且功能丰富的网页体验。文章深入探讨了布局元素的定位、样式调整以及用户交互效果的实现，为前端开发者提供了实用的技术指南。

body,ul,li,p,a,h3{
margin: 0px;
padding: 0px;
}
.wrapper{
width: 938px;height: 152px;background: round;border: 1px solid peru;
margin: 0px auto;
}
.wrapper li{
list-style-type: none;float: left;width: 156px;height: 152px;overflow: hidden;
}
.a{
display: block; width: 156px;height: 152px;position: relative;left: 0px;top: 0px;overflow: hidden;
}
.img{
width: 117px; height: 72px;position: absolute;bottom: 0px;right: 0px;
}
.font_div{
width: 136px;position: absolute;top: 0px;left: 0px;padding-left: 10px;padding-top: 10px;
}
.font_div h3{
font-size: 18px;width: 136px;
}

.wrapper .font_div .p2{
font-size: 16px;color:palevioletred;font-family: inherit;width: 136px;
}
.font_div p{
font-size: 14px; color: #d3d3d3;width: 136px;
}
.link{
width: 0px;border: 1px dashed lightpink;height: 152px;position: absolute;right: 0px; bottom: 0px;
}
.mask{
width: 156px;height: 152px;background: #000;opacity: 0;position: absolute;left: 0px; top: 0px;
}
.wrapper:hover .mask{opacity: 0.15}

.wrapper ul .big{
width: 314px;height: 152px;
}
.wrapper ul .big .a{
width: 314px;height: 152px;
}
.wrapper ul .big .a .img{
width: 170px;height: 120px;
}
.wrapper ul .big .a .font_div .p2{
font-size: 26px;color:palevioletred;font-family: inherit;width: 136px;
}
.wrapper ul .big .a .font_div p{
font-size: 24px; color: #d3d3d3;width: 136px;
}
.wrapper ul .big .a .font_div h3{
font-size: 28px;width: 136px;
}

.wrapper ul .big .a:hover .mask{opacity: 0}

-------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<link href="index.css" rel="stylesheet" type="text/css">
<meta content="text/html" http-equiv="Content-Type" charset="utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>

</head>
<body>
<div class="wrapper" id="subject">
<ul>
<li class="big">
<a href="#" class="a">
<img src="1.jpg" class="img"/>
<div class="font_div">
<h3 style="color: red">李茂</h3>
<p>李燕萍哈儿</p>
<p class="p2"><strong>1</strong><i>身一世</i></p>
</div>
<i class="link"></i>
<i class="mask"></i>
</a>
</li>

<li>
<a href="#" class="a">
<img src="1.jpg" class="img"/>
<div class="font_div">
<h3>李茂</h3>
<p>李燕萍哈儿</p>
<p class="p2"><strong>1</strong><i>身一世</i></p>
</div>
<i class="link"></i>
<i class="mask"></i>
</a>
</li>

<li>
<a href="#" class="a">
<img src="1.jpg" class="img"/>
<div class="font_div">
<h3>李茂</h3>
<p>李燕萍哈儿</p>
<p class="p2"><strong>1</strong><i>身一世</i></p>
</div>
<i class="link"></i>
<i class="mask"></i>
</a>
</li>

<li>
<a href="#" class="a">
<img src="1.jpg" class="img"/>
<div class="font_div">
<h3>李茂</h3>
<p>李燕萍哈儿</p>
<p class="p2"><strong>1</strong><i>身一世</i></p>
</div>
<i class="link"></i>
<i class="mask"></i>
</a>
</li>

<li>
<a href="#" class="a">
<img src="1.jpg" class="img"/>
<div class="font_div">
<h3>李茂</h3>
<p>李燕萍哈儿</p>
<p class="p2"><strong>1</strong><i>身一世</i></p>
</div>

<i class="mask"></i>
</a>
</li>
</ul>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>

---------------------------------

/**
* Created by 李茂 on 14-12-18.
*/
function mouseover(e){
var list = $('#subject li');
//
var target = $(e.target).parents('li');
list.removeClass('big');
target.addClass('big');
}

(function(){
var outer = $('#subject');
outer.find('li').on('mouseover', mouseover);
})()