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 浏览器判断 绑定事件 arguments 转换数组 数组遍历
Jul 06 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jQuery实现炫酷的鼠标轨迹特效
Feb 01 Javascript
javascript 继承学习心得总结
Mar 17 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
微信小程序中使用ECharts 异步加载数据实现图表功能
Jul 13 Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
PHP高手需要要掌握的知识点
2014/08/21 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Angular2  NgModule 模块详解
2016/10/19 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
React Native时间转换格式工具类分享
2017/10/24 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
vue中render函数的使用详解
2018/10/12 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
python如何实现内容写在图片上
2018/03/23 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python使用pyecharts库画地图数据可视化的实现
2020/03/25 Python
java关于string最常出现的面试题整理
2021/01/18 Python
护理专业应届毕业生推荐信
2013/11/15 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
先进班集体申报材料
2014/12/26 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
律政俏佳人观后感
2015/06/09 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
离婚协议书格式范本
2016/03/18 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
Redis Lua脚本实现ip限流示例
2022/07/15 Redis