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 parent和parents的区别分析
Oct 02 Javascript
js检测用户输入密码强度
Oct 22 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
深入理解vue中的$set
Jun 01 Javascript
详解webpack 多入口配置
Jun 16 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
JavaScript设计模式之命令模式实例分析
Jan 16 Javascript
JavaScript自定义超时API代码实例
Apr 30 Javascript
jquery轮播图插件使用方法详解
Jul 31 jQuery
利用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脚本的10个技巧(7)
2006/10/09 PHP
php删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php有效防止同一用户多次登录
2015/11/19 PHP
PHP截取IE浏览器并缩小原图的方法
2016/03/04 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
CI框架(CodeIgniter)实现的数据库增删改查操作总结
2018/05/23 PHP
PHP实现爬虫爬取图片代码实例
2021/03/03 PHP
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
javascript实现画板功能
2020/04/12 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python排序算法实例代码
2017/08/10 Python
完美解决在oj中Python的循环输入问题
2018/06/25 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
Python批量启动多线程代码实例
2020/02/18 Python
树莓派升级python的具体步骤
2020/07/05 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
西班牙香水和化妆品连锁店:Druni
2019/05/05 全球购物
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
护士自我鉴定范文
2013/10/06 职场文书
中秋寄语大全
2014/04/11 职场文书
辞职信范文大全
2015/03/02 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js