jQuery实现窗口的淡入淡出效果

最新推荐文章于 2022-12-03 09:19:38 发布

这个角度有点胖

最新推荐文章于 2022-12-03 09:19:38 发布

阅读量480

点赞数

本文链接：https://blog.csdn.net/qq_43679366/article/details/87902295

版权

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

在很多网页中都可以看到网页弹出的一个窗口，然后很多情况下面还会有淡入淡出的效果，下面我们就这个窗口的

淡入淡出效果来做一个例子，这个是使用jQuery来做的，其实非常简单。

首先看HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>浮动窗口</title>    <script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script> <script type="text/javascript" src="/Ajax/js/win.js"></script>   <link rel="stylesheet" href="/Ajax/css/win.css" type="text/css"></link>     </head>    <body>  <a href="#" onclick="showwin();">显示浮动窗口</a>  <div id="myWin">   <div id="title">我是标题栏<span id="span"><a href="#" onclick="hello()">关闭</a></span></div>   <div id="content">我是一个窗口哦!!!</div>  </div>  </body></html>

然后再看JavaScript代码

//显示浮动窗口的方法function showwin(){ //alert("hah"); //显示窗口 //$("#myWin").show("slow"); $("#myWin").fadeIn(3500);}function hello(){ $("#myWin").fadeOut(2000);}

剩下的就是CSS代码了

#myWin{ /*希望窗口有边框*/ border: 1px red solid; width: 300px; height: 200px; /*控制窗口的位置*/ position: absolute; top: 100px; left: 350px;  display: none;}/*控制标题栏的背景色*/#title{ background-color: yellow; /*控制标题栏左内边距*/ padding-left: 3px; }#content{ padding-top: 5px; padding-left: 5px;}#span{ padding-left: 180px;}a:LINK{ text-decoration: none;}a:HOVER { color: red;}