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

分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!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: 300pxheight: 200px/*控制窗口的位置*/ position: absolute; top: 100pxleft: 350px;  display: none;}/*控制标题栏的背景色*/#titlebackground-color: yellow; /*控制标题栏左内边距*/ padding-left: 3px; }#contentpadding-top: 5pxpadding-left: 5px;}#spanpadding-left: 180px;}a:LINKtext-decoration: none;}a:HOVERcolor: red;}

效果还是很好的,而且很简单,           

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

猜你喜欢

转载自blog.csdn.net/qq_43679366/article/details/87902295