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开发技术大全-第3章 js数据类型
Jul 03 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
jquery插件unobtrusive实现片段式加载
Jun 15 Javascript
js实现三张图(文)片一起切换的banner焦点图
Aug 25 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
jQuery插件制作的实例教程
May 16 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
Element Notification通知的实现示例
Jul 27 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
react使用antd的上传组件实现文件表单一起提交功能(完整代码)
Jun 29 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
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
ThinkPHP5.1验证码功能实现的示例代码
2020/06/08 PHP
Jquery 绑定时间实现代码
2011/05/03 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
babel的使用及安装配置教程
2018/02/22 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
浅谈Vue的响应式原理
2019/05/30 Javascript
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python实现Kmeans聚类算法
2020/06/10 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python使用paramiko实现ssh的功能详解
2020/03/06 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python解包概念及实例
2021/02/17 Python
python实现图片转字符画
2021/02/19 Python
HTML 5 input placeholder 属性如何完美兼任ie
2014/05/12 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
大学生党校培训心得体会
2014/09/11 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
董事长助理工作总结2015
2015/07/23 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书