怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 342 JQUERY DREAMWEAVER
怎样用JAVASCRIP制作类似QQ消息的弹出窗效果
来源：互联网
2023-03-16 23:54:11 183
我们每天在使用QQ的过程中，熟悉QQ的用户会发现，QQ会每天不定时推送一些弹框信息，例如热门新闻以及一些视频。有些弹框它弹出时会延迟了几秒后又自动消失。其实，要实现这种效果很简单，下面小编通过一个简单的例子，介绍怎样用JAVASCRIP(JQUERY)制作类似QQ消息的弹出窗效果。
工具/原料
- Dreamweaver CS6编辑器 (或其他编辑器)
- Google Chrome浏览器(或其他浏览器)
方法/步骤
前端用到的编辑器有很多，本例通过选择Dreamweaver CS6编辑器来制作类似QQ消息的弹出窗效果。第一步，打开电脑中安装的Dreamweaver CS6，新建demo文件夹用来存放文件，在里面新建一个html文件，并命名标题。如图：
第二步，写HTML代码。加一个按钮，用来出发点击事件；加一个DIV，用来存放弹框。代码如下：
input type="button" value="QQ消息" id="showMsg" />
div id="msgQQ">/div>
第三步，在顶部head标签里引入CSS文件（由于本例比较简单，选择在style标签中写）。接着，下载好相关的库文件后，我们将JQuery文件放在Body标签底部。注意要引入jQuery库，不然你写的JQuery不会有效果的。如图：
第四步，写相关CSS代码。其中，divmsgQQ样式，“position: fixed;right: 0px;bottom: 0px;”是用来将此div固定在右下角的位置。相关的CSS代码如下：
body {
height: 1000px;
}
#msgQQ {
border:1px solid #000;
width: 300px;
height: 200px;
position: fixed; /*固定div标签*/
right: 0px;
bottom: 0px;
background-color: red;
}
第五步，写JQuery代码。先定义一个关闭弹窗的函数。表示弹框在点击出发3秒后隐藏弹框。相关的代码如下：
function close() {
setTimeout(function () {
$("#msgQQ").slideUp(); //3秒后隐藏弹框
}, 3000);
}
第六步，将要执行的函数写在$(function (){}中，表示dom加载完后执行。页面载入时，div默认是隐藏的；点击按钮后，3秒时间显示弹框后调用close函数，即弹出3秒后消失。相关的代码如下：
$(function () {
$("#msgQQ").hide();
$("#showMsg").click(function () {
$("#msgQQ").slideDown(3000, close); //3秒时间显示弹框后调用close函数
});
});
第七步，JQuery代码完成。于是，就实现了简单的QQ消息的弹出窗效果了。我们点击上面的“在浏览器中预览”图标，查看效果（其实每写完一步代码就应该查看效果，即调试）。完整的JQuery代码如下图：
script language="javascript" type="text/javascript">
$(function () {
$("#msgQQ").hide();
$("#showMsg").click(function () {
$("#msgQQ").slideDown(3000, close); //3秒时间显示弹框后调用close函数
});
});
function close() {
setTimeout(function () {
$("#msgQQ").slideUp(); //3秒后隐藏弹框
}, 3000);
}
/script>
最后，在浏览器中查看效果。可以看到，我们点击按钮，会慢慢弹出一个红色的弹框，三秒后消失。如图所示，读者可以自行实践。
附：本经验关键词：Dreamweaver CS6制作QQ消息的弹出窗、怎样用JAVASCRIP制作QQ消息的弹出窗、HTML/CSS制作、QQ消息、弹框、网站制作、网页制作、Dreamweaver 、JAVASCRIPT。
注意事项
- 部分图片来源于网络。
- 注意要引入jQuery库，并且要放所写的JQUERY代码上面，不然不会有效果。读者可以自行实践。
- 如果您觉得这篇经验有帮到您，麻烦给小编点个赞，投个票；如果您想查看更多我的经验，请点击上方我的头像下的“关注”或直接点击头像旁的昵称。当然，您也可以点击右下方的双箭头分享给好友。感谢您的支持！
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPTQQ制作JQUERYDREAMWEAVER
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 333 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 376 JQUERY