steam想申明库存量，不晓得在哪里去增设，那个出口处是稍稍有点儿深，由此可见毕竟也很单纯，一起来看一看什么样操作方式。操作方式方式01登入steam后，点选街道社区旁的对个人......
2024-02-05 552
怎样用JAVASCRIP制作类似QQ消息的弹出窗效果
来源：互联网
2023-02-21 15:49:29 版权归原作者所有，如有侵权，请联系我们
我们每天在使用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
上一篇：常用QQ快捷键，怎么设置 下一篇：手机qq如何实名认证
相关文章
- 详细阅读
-
ps快捷键大全与常用快捷键-ps常用快捷键大全和技巧详细阅读
操作方式方法01【辅助widget】多种辅助工具相连接两个功能键的可同时按【Shift】加此功能键挑选出1、正方形、圆锥选框辅助工具 【M】 2、终端辅助工具 【V】 3、截叶......
2024-02-05 481
-
qq头像上传失败怎么办-qq头像上传失败1503详细阅读
操作方式01文档格式难题qq肖像最合适用jpeg文档格式的相片，若是相片有透明化地下通道，能选用png文档格式上载。 02大小不一难题若是相片极重也可能将引致上载失利，检......
2024-02-05 408