电影排行榜
实现效果展示
实现步骤
第一步(实现静态效果)
- css部分
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
margin: 50px auto;
border: 1px solid #000;
cursor: pointer;
}
.box>h1{
font-size: 20px;
line-height: 35px;
color: deeppink;
padding-left: 10px;
border-bottom: 1px dashed #ccc;
}
ul>li{
list-style: none;
padding: 5px 10px;
border: 1px dashed #ccc;
}
ul>li:nth-child(-n+3) span{
background: deeppink;
}
ul>li>span{
display: inline-block;
width: 20px;
height: 20px;
background: #ccc;
text-align: center;
line-height: 20px;
margin-right: 10px;
}
.content{
overflow: hidden;
margin-top: 5px;
display: none;
}
.content>img{
width: 85px;
height: 120px;
float: left;
}
.content>p{
width: 180px;
height: 120px;
float: right;
font-size: 12px;
line-height: 20px;
}
.current .content{
display: block;
}
- html部分
<div class="box">
<h1>电影排行榜</h1>
<ul>
<li><span>1</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
<li><span>2</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
<li><span>3</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
<li><span>4</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
<li><span>5</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
<li><span>6</span>电影名称
<div class="content">
<img src="images/07.jpg" alt="">
<p>简介:测试内容</p>
</div>
</li>
</ul>
</div>
第二步(动态实现)
主要用到的是事件的移入移出
- 当鼠标移入后隐藏的div显示出来
- 当鼠标移出后显示的div隐藏起来
第一种方法
$("li").mouseenter(function () {
$(this).addClass("current");
});
// 2.监听li的移出事件
$("li").mouseleave(function () {
$(this).removeClass("current");
});
第二种方法
$("li").hover(function () {
$(this).addClass("current");
}, function () {
$(this).removeClass("current");
});
第三种方法
$('li').hover(function () {
$(this).toggleClass('current')
})
Tab选项卡
实现效果展示
实现步骤
第一步(静态效果)
- css样式
*{
margin: 0;
padding: 0;
}
.box{
width: 440px;
height: 298px;
border: 1px solid #000;
margin: 50px auto;
cursor: pointer;
}
.nav>li{
list-style: none;
width: 110px;
height: 50px;
background: orange;
text-align: center;
line-height: 50px;
float: left;
}
.nav>.current{
background: #ccc;
}
.content>li{
list-style: none;
display: none;
}
.content>.show{
display: block;
}
- html样式
<div class="box">
<ul class="nav">
<li class="current">独傲松鼠</li>
<li>功夫花栗鼠</li>
<li>飞翔松鼠</li>
<li>蹦迪松鼠</li>
</ul>
<ul class="content">
<li class="show"><img src="http://img.netbian.com/file/newc/58fae904f38ba8ccebb84f6b76f2d520.jpg" width="440px" height="248px"></li>
<li><img src="http://img.netbian.com/file/newc/6b0ceb3a9a6beaf4ef41a6fd7d635dd8.jpg" width="440px" height="248px"></li>
<li><img src="http://img.netbian.com/file/newc/c29709c01a9ae7bdbc52a07b4a6719b6.jpg" width="440px" height="248px"></li>
<li><img src="http://img.netbian.com/file/newc/30564ad632b2f71758f2531aae912490.jpg" width="440px" height="248px"></li>
</ul>
</div>
第二步(动态实现)
第一种方法(有一点点bug)
主要运用到了移入移出事件
- 监听选项卡的移入事件
- 修改被移入选项卡的背景颜色
- 获取当前移入选项卡的索引
- 根据索引找到对应的图片
- 显示找到的图片
$(".nav>li").mouseenter(function () {
// 1.1修改被移入选项卡的背景颜色
$(this).addClass("current")
// 1.2获取当前移入选项卡的索引
var index = $(this).index()
// 1.3根据索引找到对应的图片
var $li = $(".content>li").eq(index)
// 1.4显示找到的图片
$li.addClass("show")
})
- 监听选项卡的移出事件
- 还原选项卡的背景颜色
- 获取当前移出选项卡的索引
- 根据索引找到对应的图片
- 隐藏对应的图片
$(".nav>li").mouseleave(function () {
// 1.1还原选项卡的背景颜色
$(this).removeClass("current")
// 1.2获取当前移出选项卡的索引
var index = $(this).index()
// 1.3根据索引找到对应的图片
var $li = $(".content>li").eq(index)
// 1.4隐藏对应的图片
$li.removeClass("show")
})
第二种方法
主要运用到了**siblings()**方法 – 允许我们在DOM树中搜索这些元素的兄弟节点,并从匹配的元素构造一个新的jQuery对象。
- 监听选项卡的移入事件
- 修改被移入选项卡的背景颜色
- 还原其它兄弟选项卡的背景颜色
- 获取当前移出选项卡的索引
- 根据索引找到对应的图片
- 隐藏非当前的其它图片
- 显示对应的图片
// 1.监听选项卡的移入事件
$(".nav>li").mouseenter(function () {
// 1.1修改被移入选项卡的背景颜色
$(this).addClass("current")
// 1.2还原其它兄弟选项卡的背景颜色
$(this).siblings().removeClass("current")
// 1.3获取当前移出选项卡的索引
var index = $(this).index()
// 1.4根据索引找到对应的图片
var $li = $(".content>li").eq(index)
// 1.5隐藏非当前的其它图片
$li.siblings().removeClass("show")
// 1.6显示对应的图片
$li.addClass("show")
})