jQuery应用实例1：定时弹出图片
程序员文章站
2022-06-22 12:54:09
以前用JS实现的：http://www.cnblogs.com/xuyiqing/p/8373064.html 这里利用jQuery实现，并且做得更完善： 多种特效，后面的参数是毫秒值： 还有一种方式是toggle，这里单独介绍： 这里可以理解为：display:none的修改为block，disp ......
以前用JS实现的：http://www.cnblogs.com/xuyiqing/p/8373064.html
这里利用jQuery实现，并且做得更完善：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
//1.书写显示广告图片的定时操作
time = setInterval("showAd()", 2000);
});
//2.书写显示广告图片的函数（各种效果）
function showAd() {
//3.获取广告图片，并让其显示
//$("#img2").show(1000);
//这里是1秒内弹入图片
$("#img2").slideDown(1000);
//这里是1秒内滑入图片（自上到下）
//$("#img2").fadeIn(4000);
//这里是4秒内图片逐渐显示（淡入）
//4.清除显示图片定时操作
clearInterval(time);
//5.设置隐藏图片的定时操作
time = setInterval("hiddenAd()", 2000);
}
function hiddenAd() {
//6.获取广告图片，并让其隐藏（也有多种效果）
//$("#img2").hide(6000);
//这里是图片6秒内弹出
$("#img2").fadeOut(6000);
//这里是6秒内图片淡出
//7.清除隐藏图片的定时操作
clearInterval(time);
}
</script>
</head>
<body>
<div>
<img src="img/1.jpg" width="100%" style="display: none" id="img2" />
</div>
</body>
</html>
多种特效，后面的参数是毫秒值：
还有一种方式是toggle，这里单独介绍：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>toggle的使用</title>
<style>
div {
border: 1px solid white;
width: 500px;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script>
$(function() {
$("#btn").click(function() {
$("#img1").toggle();
//改变显示状态
//隐藏则变成显示，显示的变成隐藏状态
});
});
</script>
</head>
<body>
<div>
<input type="button" value="显示/隐藏" id="btn" /><br />
<img src="img/1.jpg" width="100%" height="100%" id="img1" />
</div>
</body>
</html>
这里可以理解为：display:none的修改为block，display:block的修改为none
上一篇： springboot 学习笔记（七）
下一篇： 初识网络编程