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 相关文章推荐
用jquery来定位
Feb 20 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
详解Vue中的Props与Data细微差别
Mar 02 Javascript
深入浅析React中diff算法
May 19 Javascript
利用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
磨咖啡豆的密诀
2021/03/03 冲泡冲煮
通过php修改xml文档内容的方法
2015/01/23 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
提高php编程效率技巧
2015/08/13 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
PHP购物车类Cart.class.php定义与用法示例
2016/07/20 PHP
常用PHP数组排序函数归纳
2016/08/08 PHP
php 中的closure用法详解
2017/06/12 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
php的lavarel框架中join和orWhere的用法
2020/12/28 PHP
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
js单例模式的两种方案
2013/10/22 Javascript
一个JavaScript递归实现反转数组字符串的实例
2014/10/14 Javascript
jquery文档操作wrap()方法实例简述
2015/01/10 Javascript
javascript实现将文件保存到本地方法汇总
2015/07/26 Javascript
原生js实现返回顶部缓冲效果
2017/01/18 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS排序算法之希尔排序与快速排序实现方法
2017/12/12 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
2019/09/07 Javascript
[06:04]DOTA2国际邀请赛纪录片:Just For LGD
2013/08/11 DOTA
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
浅谈Python中range与Numpy中arange的比较
2020/03/11 Python
零基础小白多久能学会python
2020/06/22 Python
Python 解析xml文件的示例
2020/09/29 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
The North Face北面法国官网:美国著名户外品牌
2019/11/01 全球购物
会计试用期工作总结2015
2015/05/28 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python