1、正常地显示、隐藏图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#btn_hide").click(function(){
$("img").hide();
})
$("#btn_show").click(function () {
$("img").show();
})
})
</script>
</head>
<body>
<input id="btn_hide" type="button" value="隐藏" />
<input id="btn_show" type="button" value="显示" /><br/>
<img src="../practice/image/喷火龙.jpg" alt=""/>
</body>
</html>
2、动态地显示、隐藏图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
$(function () {
$("#btn_hide").click(function(){
$("img").hide("fast");
})
$("#btn_show").click(function () {
$("img").show(500);
})
})
</script>
</head>
<body>
<input id="btn_hide" type="button" value="隐藏" />
<input id="btn_show" type="button" value="显示" /><br/>
<img src="../practice/image/喷火龙.jpg" alt=""/>
</body>
</html>
运行效果图:
3、图片淡入、淡出显示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$("#btn_hide").click(function(){
$("img").fadeOut();
})
$("#btn_show").click(function () {
$("img").fadeIn();
})
})
</script>
</head>
<body>
<input id="btn_hide" type="button" value="淡出" />
<input id="btn_show" type="button" value="淡入" /><br/>
<img src="img/jquery.png" alt=""/>
</body>
</html>
4、点击某一内容,显示其它设定内容,继续点击,再隐藏
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{ width:300px;}
h3
{
text-align:center;
padding:10px;
background-color:#EEEEEE;
}
h3:hover
{
background-color:yellow;
cursor:pointer;
}
p
{
background-color:greenyellow;
padding:8px;
line-height:24px;
display:none;
}
</style>
<script src="../static/js/jquery-3.5.1.js"></script>
<script>
$(function () {
//设置一个变量flag用于标记元素状态,是“滑下”还是“滑上”
var flag = 0;
$("h3").click(function () {
if (flag == 0) {
$("p").slideDown();
flag = 1;
}
else {
$("p").slideUp();
flag = 0;
}
});
})
</script>
</head>
<body>
<div>
<h3>智能小车简介</h3>
<p>该智能小车从硬件搭建、后台服务搭建、前端设计,都是由我们帅帅的、有点小可爱的胡登砚同学开发的!2021年9月18日</p>
</div>
</body>
</html>
运行效果:
-
点击前:
-
点击后:
-
继续点击: