jquery实现突出显示效果
2017-09-12 21:28
211 查看
jquery实现突出显示效果代码:
在HTML中写出要展示的图片,直接采用ul和li标签;加上图片的目录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>突出展示效果</title>
<style>
.nav ul li{
list-style: none;
float:left;
}
body{
background-color: #000000;/*为了更好的看到突出效果,设置背景为黑色*/
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<!--引入jQuery-->
<script>
$(document).ready(function(){
// 入口函数
$(".nav>ul>li").mouseenter(function(){
// 根据父级找到子级元素.使用mouseenter事件
$(this).css("opacity","1").siblings("li").css("opacity","0.2");
// this指鼠标进入事件的图片.设置样式透明度为1,siblings查找除自己以外的子级元素并设置透明度为0.2
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
<li><img src="img/03.jpg" alt="" /></li>
<li><img src="img/04.jpg" alt="" /></li>
<li><img src="img/05.jpg" alt="" /></li>
<li><img src="img/06.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
效果图:
在HTML中写出要展示的图片,直接采用ul和li标签;加上图片的目录
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>突出展示效果</title>
<style>
.nav ul li{
list-style: none;
float:left;
}
body{
background-color: #000000;/*为了更好的看到突出效果,设置背景为黑色*/
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
<!--引入jQuery-->
<script>
$(document).ready(function(){
// 入口函数
$(".nav>ul>li").mouseenter(function(){
// 根据父级找到子级元素.使用mouseenter事件
$(this).css("opacity","1").siblings("li").css("opacity","0.2");
// this指鼠标进入事件的图片.设置样式透明度为1,siblings查找除自己以外的子级元素并设置透明度为0.2
});
});
</script>
</head>
<body>
<div class="nav">
<ul>
<li><img src="img/01.jpg" alt="" /></li>
<li><img src="img/02.jpg" alt="" /></li>
<li><img src="img/03.jpg" alt="" /></li>
<li><img src="img/04.jpg" alt="" /></li>
<li><img src="img/05.jpg" alt="" /></li>
<li><img src="img/06.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>
效果图:
相关文章推荐
- jQuery实现网站添加高亮突出显示效果的方法
- jQuery实现网站添加高亮突出显示效果的方法
- jQuery实现基本隐藏与显示效果的方法详解
- JQuery实现鼠标移动到图片上显示边框效果
- jQuery实现可高亮显示的二级CSS菜单效果
- jQuery实现的浮动层div浏览器居中显示效果
- jQuery实现“分页”的效果,控制div分页显示
- jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
- Jquery实现的tab效果可以指定默认显示第几页
- JQuery实现鼠标移动到图片上显示边框效果
- 分享一个CSS3和jQuery实现的模糊显示效果 - 帮助你的访问用户更好的阅读内容
- 用JQuery实现表格隔行变色和突出显示当前行
- jquery实现表现表格隔行换色突出显示
- 基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
- JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
- jQuery实现鼠标滑过图片时会缩小并动态显示信息的幻灯效果
- Jquery实现的tab效果可以指定默认显示第几页
- jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码