这次我们要学习的是突出显示案例,这个案例要使用的方法是jQuery。
首先在栅格系统wrap内创建8个li标签在里面放入可选中的图片
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
然后把页面的属性设置好
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
width: 200px;
height: 186px;
display: block;
border: 0;
}
</style>
把jQuery插件带入代码中
<script src="./jquery-1.12.2.js"></script>
写入页面加载事件获取所有的li,添加鼠标移入移出事件
<script>
$(function(){
// 获取所有的li,添加鼠标进入事件
$(".wrap>ul>li").mouseenter(function(){
// 设置当前li的透明度,同时修改当前li的所有兄弟元素li的透明度
$(this).css("opacity",1).siblings().css("opacity",0.5);
});
// 鼠标离开事件
$(".wrap").mouseleave(function(){
// 从当前的div中找到所有的li,设置透明度
// find("值") 找到当前父级元素下面的子元素 值:子元素,孙子元素
$(this).find("li").css("opacity",1);
});
});
</script>
小结:本次学习的内容属于jQuery的鼠标移入mouseenter移出mouseleave事件,通过移入移出显示了高亮效果非常突出,注意: siblings()是兄弟元素而 nextsiblings()则是下一个兄弟元素,find("值") 找到当前父级元素下面的子元素 值:子元素,孙子元素。
这是我所学到的jQuery案例，所以我要分享给你们，希望可以帮助到你们。
以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！
扫一扫
289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
