分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!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;}
效果还是很好的,而且很简单,
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow