JS简单实现浮动窗口效果示例


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS简单实现浮动窗口效果。分享给大家供大家参考,具体如下:

HTML部分:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
a img{ border:0;}
</style>
</head>
<body>
<div style="height:2000px; background:#ccc; display:none;">
</div>
<!--div id="floatAd" style=" position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 2147483647; left: 50%; margin-left: -240px !important; top: 50%; margin-top: -210px !important; background:url(images/onlineSay.jpg) no-repeat; width:487px; height:350px; cursor:pointer;">
<div onclick="closeFAd();" style=" width:26px; height:26px; float:right;"></div>
<div style="width:487px; height:320px; float:right;" onclick="open_online();"></div>
</div>
<div id="floatSide" style=" width:141px; height:579px; position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 99999; right:0; top:6%; background:url(images/onlineTel.gif);cursor:pointer;" onclick="open_online();></div-->
</body>
</html>
<script type="text/javascript" src="online.js"></script>

JS部分:

// JavaScript Document
//浮动广告图片
var floatAdImg = "images/onlineSay.jpg";
//浮动侧栏图片
var floatSideImg = "images/onlineTel.gif";
//打开在线沟通
function open_online()
{
 window.open('http://p.qiao.baidu.com//im/index?siteid=7342332&ucid=7601325');
}
//浮动广告
document.writeln("<div id=\"floatAd\" style=\" position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 2147483647; left: 50%; margin-left: -240px !important; top: 50%; margin-top: -210px !important; background:url("+floatAdImg+") no-repeat; width:487px; height:350px; cursor:pointer; display:none; \">");
document.writeln("<div onclick=\"closeFAd();\" style=\" width:26px; height:26px; float:right;\"></div>");
document.writeln("<div style=\"width:487px; height:320px; float:right;\" onclick=\"open_online();\"></div>");
document.writeln("</div>");
//浮动侧栏
document.writeln("<div style=\" width:141px; height:579px; position:fixed !important; position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight)); z-index: 99999; right:0; top:6%; background:url("+floatSideImg+");cursor:pointer;\" onclick=\"open_online();\"></div>");
//关闭浮动广告
function closeFAd()
{
 document.getElementById('floatAd').style.display = 'none';
}
//打开浮动广告
function showFAd()
{
 document.getElementById('floatAd').style.display = 'block';
}
//打开浮动窗口
function showFloat()
{
 document.getElementById('floatAd').style.display = 'block';
}
//打开窗口 20 秒仅执行一次
setTimeout(showFAd,20000);
//每个 30 秒执行一次
setInterval(showFloat,30000);

效果图如下:

JS简单实现浮动窗口效果示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
Js组件的一些写法
Sep 10 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
详细解读JavaScript编程中的Promise使用
Jul 27 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
利用Javascript仿Excel的数据透视分析功能
Sep 07 #Javascript
Vue.js快速入门教程
Sep 07 #Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 #Javascript
Vue.js每天必学之内部响应式原理探究
Sep 07 #Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 #Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 #Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
php5.3提示Function ereg() is deprecated Error问题解决方法
2014/11/12 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
巧用js提交表单轻松解决一个页面有多个提交按钮
2013/11/17 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
快速解决js中window.location.href不工作的问题
2016/11/02 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
在vue中添加Echarts图表的基本使用教程
2017/11/22 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
Python多进程同步简单实现代码
2016/04/27 Python
深入理解python函数递归和生成器
2016/06/06 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
Django框架HttpResponse对象用法实例分析
2019/11/01 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
小学英语教学反思
2014/01/30 职场文书
电子信息专业自荐书
2014/02/04 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
某某同志考察材料
2014/05/28 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
企业员工辞职信范文
2015/05/12 职场文书
浅谈Java实现分布式事务的三种方案
2021/06/11 Java/Android
浅谈Python魔法方法
2021/06/28 Java/Android
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
MySQL示例讲解数据库约束以及表的设计
2022/06/16 MySQL