jquery的弹出效果图

最新推荐文章于 2023-03-05 00:29:20 发布

W天若有情天亦老D

最新推荐文章于 2023-03-05 00:29:20 发布

阅读量298

点赞数

分类专栏： jquery 文章标签： jquery弹出效果

本文链接：https://blog.csdn.net/Java_wangdan/article/details/79821179

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于jquery的3种弹出图片效果:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时弹出广告图</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script>
$(function()
{
times1= setInterval("show1()",2000);
times2= setInterval("show2()",4000);
times3= setInterval("show3()",6000);
});
/*
* js实现定时弹出广告图
* window.οnlοad=function()
{

times=setInterval("show()",1000);
}
function show()
{
document.getElementById("img1").style.display="block";
clearInterval(times);
times=setInterval("hiddenImg()",5000);
}
function hiddenImg()
{
document.getElementById("img1").style.display="none";
clearInterval(times);
setInterval("show()",1000);
}*/
//jquery实现定时弹出广告图

//弹出效果1
function show1()
{

$("#img1").show(2000);
clearInterval(times1);
times1=setInterval("hiddenImg1()",2000);
}
function hiddenImg1()
{
//隐藏效果1
$("#img1").hide(3000);
clearInterval(times1);
}
//弹出效果2
function show2()
{

$("#img2").slideDown(4000);
clearInterval(times2);
times2=setInterval("hiddenImg2()",4000);
}
function hiddenImg2()
{

$("#img2").slideUp(5000);
clearInterval(times2);
}
//弹出效果3
function show3()
{
$("#img3").fadeIn(6000);
clearInterval(times3);
times3=setInterval("hiddenImg3()",6000);
}
function hiddenImg3()
{

$("#img3").fadeOut(2000);
clearInterval(times3);
}
</script>

</head>
<body>
<div align="center">
<img id="img1" src="../img/1.jpg" style="display:none" width="500px" height="300px" />
</div>
<div align="center">
<img id="img2" src="../img/2.jpg" style="display:none" width="500px" height="300px" />
</div>
<div align="center">
<img id="img3" src="../img/3.jpg" style="display:none" width="500px" height="300px" />
</div>
</body>
</html>