jQuery入门学习五：浮动窗口

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

jubincn

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

阅读量7.5k

点赞数

文章标签： jquery div stylesheet javascript css function

本文链接：https://blog.csdn.net/jubincn/article/details/4535689

版权

本文的内容基本来自itcast上的视频教程，所用示例也基本是那上面的例子

其实浮动窗口就是一个div，然后用css控制其外观，用JavaScript控制其行为。是一种通过对原始数据不断修改来得到自己所要的结果的一种方法。

创建浮动窗口一般要经过以下几步：

创建一个窗口实体：div

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>itcast.cn的JQuery实例1：浮动窗口</title>  <mce:script type="text/javascript" src="jslib/jquery.js" mce_src="jslib/jquery.js"></mce:script> <mce:script type="text/javascript" src="jslib/jquerywin.js" mce_src="jslib/jquerywin.js"></mce:script>  <link type="text/css" rel="stylesheet" href="css/win.css" mce_href="css/win.css" /> </head> <body> <a οnclick="showwin()" href="#" mce_href="#">显示浮动窗口</a>    <div id="win"> <div id="title">我是标题栏啊！！<span id="close" οnclick="hide()">X</span></div> <div id="content">我是一个窗口哦！！</div> </div> </body> </html>

创建控制显示与隐藏的JavaScript文件(3中方法)

//显示浮动窗口的方法 function showwin() { //lert("准备显示弹出窗口啦！！！"); //1.找到窗口对应的div节点 var winNode = $("#win"); //2.让div对应的窗口显示出来 //方法1,修改节点的css值，让窗口显示出来 //winNode.css("display","block"); //方法2，利用Jqeury的show方法 //winNode.show("slow"); //方法3，利用JQuery的fadeIn方法 winNode.fadeIn("slow"); } //隐藏窗口的方法 function hide() { //1.找到窗口对应的节点 var winNode = $("#win"); //2.将窗口隐藏起来 //方法1，修改css //winNode.css("display","none"); //方法2，利用hide方法 //winNode.hide("slow"); //方法3，利用fadeOut方法 winNode.fadeOut("slow"); }

创建控制网站外观的css文件

/*id选择器*/ #win { /*希望窗口有边框*/ border: 1px red solid; /*希望窗口宽度和高度固定，不要太大*/ width: 300px; height: 200px; /*希望控制窗口的位置*/ position: absolute; /*绝对定位*/ top: 100px; left: 350px; /*希望窗口开始时不可见*/ display: none; } /*控制标题栏的样式*/ #title { /*控制标题栏的背景色*/ background-color: blue; /*控制标题栏中文字的颜色*/ color: yellow; /*控制标题栏的左内边距*/ padding-left:3px; } /*控制内容区域的样式*/ #content { padding-left: 3px; padding-top: 5px } /*控制关闭按钮的位置*/ #close { /*使关闭按钮向右侧移动*/ margin-left: 158px; /*让鼠标进入时可以显示小手，告知用户可以点击操作*/ cursor: pointer; }