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 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
获取DOM对象的几种扩展及简写
Oct 09 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
Nov 10 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
JavaScript语法约定和程序调试原理解析
Nov 03 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
一个SQL管理员的web接口
2006/10/09 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
php实现微信发红包功能
2018/07/13 PHP
PHP封装的完整分页类示例
2018/08/21 PHP
JS与框架页的操作代码
2010/01/17 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
javascript中SetInterval与setTimeout的定时器用法
2015/08/24 Javascript
angular分页指令操作
2017/01/09 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python中的一些陷阱与技巧小结
2015/07/10 Python
Python切片操作深入详解
2018/07/27 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
pytorch 修改预训练model实例
2020/01/18 Python
python函数中将变量名转换成字符串实例
2020/05/11 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
大学生党员批评与自我批评范文
2014/10/14 职场文书
酒店员工管理制度
2015/08/05 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android
python中pycryto实现数据加密
2022/04/29 Python