JS简单实用的浮动窗口

最新推荐文章于 2024-05-24 16:08:13 发布
最新推荐文章于 2024-05-24 16:08:13 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： 境-JS 文章标签： javascript ui xhtml ViewUI 
<!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 οnclick="closeFAd();" style=" width:26px; height:26px; float:right;"></div>
<div style="width:487px; height:320px; float:right;" οnclick="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;" οnclick="open_online();></div-->


</body>
</html>
<script type="text/javascript" src="online.js"></script>

 

 

// JavaScript Document


//浮动广告图片
var floatAdImg = "http://www.onestopweb.cn/online/onlineSay.jpg";
//浮动侧栏图片
var floatSideImg = "http://www.onestopweb.cn/online/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 οnclick=\"closeFAd();\" style=\" width:26px; height:26px; float:right;\"></div>");
document.writeln("<div style=\"width:487px; height:320px; float:right;\" οnclick=\"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;\" οnclick=\"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);

 

效果图：

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Auto.js中的悬浮窗
越陌度阡
08-09 8621
悬浮窗一般用来显示当前脚本运行的状态和信息，是最为重要的人机交互方式。悬浮窗在脚本停止运行时会自动关闭，因此，要保持悬浮窗不被关闭，需要用一个空的setInterval来实现。 1. 创建和关闭悬浮窗 1.1. 创建并显示一个悬浮窗 上面的代码中会返回一个FloatyWindow对象。由于脚本运行的线程不是UI线程，而所有对控件的修改操作需要在UI线程执行，此时需要用ui.run(function(){})方法来调用。......
用JS实现网页浮动窗口随窗口滚动（类似于客服窗口）
11-30
js 网页浮动 类似于客服窗口 随窗口滚动
简单实现js浮动框
11-30
本文实例为大家分享了js浮动框的实现代码，供大家参考，具体内容如下 一.在需要加入浮动框的页面中加入如下css代码： <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win { border: 1px solid #A67901; background: #EAEAEA; width: 240px; position: absolute; right: 0; font-size: 12px; font-family: Arial; margin: 0px; display: none; ove
js脚本（网页浮动窗口）
m0_58085092的博客
06-05 3507
一个嵌入网页的浮动窗口，你可以学习其中思想，做一个更好的 其它内容的浮动窗口
【Qt 学习笔记】Qt窗口 | 浮动窗口 | QDockWidget的使用及说明
最新发布
小黄鸭的博客
05-24 1285
浮动窗口是计算机图形界面中一种常见的窗口类型，它可以悬浮在其他窗口之上并且可以自由移动。浮动窗口通常被用于显示一些特定的信息或功能，例如实时监测数据、通知消息、弹出菜单等。浮动窗口可以在屏幕上的任何位置出现，用户可以根据需要将其拖动到合适的位置。QDockWidget是Qt中的一个窗口部件，它提供了一个可停靠的面板，可用于显示和编辑各种内容。QDockWidget可以在主窗口中创建并停靠在不同的位置，如左侧、右侧、顶部或底部。它可以通过拖动和放置的方式来改变其位置和大小。
js 实现浮窗
u013028240的专栏
10-08 1393
js 实现浮窗
JS简单实现浮动窗口效果示例
10-21
在JavaScript中实现浮动窗口效果，主要是通过操作DOM元素的CSS属性来实现的。浮动窗口通常用于网站上的广告或者在线客服功能，它会始终出现在浏览器窗口的某个固定位置，即使用户滚动页面，窗口仍然保持可见。 首先...
JS实现简单易用的手机端浮动窗口显示效果
10-21
主要介绍了JS实现简单易用的手机端浮动窗口显示效果,涉及javascript针对页面元素的动态操作相关技巧,适用于做广告展示,需要的朋友可以参考下
jQuery之浮动窗口实现代码(两种方法)
10-28
在JavaScript中，`drag()`函数使用`onmousedown`、`onmousemove`和`onmouseup`事件监听鼠标操作，计算鼠标按下时的位置与浮动窗口位置的偏移量，然后根据鼠标移动的新位置更新窗口的`left`和`top`属性，实现拖动效果...
divwin.js浮动窗口代码
10-05
一个最简单的浮动窗口的例子，js代码完整，窗口可以关闭后可再显示。
6种浮动提示框，弹出窗口，JS代码
10-22
总共有6种浮动提示框，鼠标移动图片或者文字上，会有浮动的提示窗口跟随，跟随鼠标移动，图片部分区域提示等都有
js实现悬浮窗效果(支持拖动)
10-20
本文主要介绍了js实现悬浮窗效果(支持拖动)的实例，具有很好的参考价值。下面跟着小编一起来看下吧
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
10-23
主要介绍了JS实现弹出浮动窗口,可支持鼠标拖动和关闭的功能,界面美观大方,涉及javascript动态创建对话框的相关技巧,需要的朋友可以参考下
js实现悬浮可拖动登录窗口(demo)
10-23
dropDiv2.0是我在拖拽div例子的基础上改进的例子。相对于拖拽例子，这里增添了event浏览器兼容性处理、禁鼠标选中的一些机制。
一个JS弹出层
w87875251l的专栏
02-16 651
<br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><br /><title>页面内的超级酷浮动窗口</title><br /><style type='text/css'><br /><!--<br />a:visited{text-decoration:none;color:slategray;}<br />a:hover{text-decoration:und
autojs 悬浮框演示代码
程序员入门进阶
12-28 2970
很多人在写autojs的时候，都是没有界面的，所以就少了很多智能化操作，这一节给大家分享一段代码，如何使用悬浮框。布局上跟安卓一样，同时操作也很简单，直接能够看懂。关于更多的脚本，后面再继续给大家分享。
基于JQuery网页漂浮广告窗口Js详解
热门推荐
yukeung
04-06 2万+
网页类似广告漂浮窗口的制作思路以及详细代码
js浮动窗口代码
飞一龙的专栏
07-16 7354
                                                                                               var bNetscape4plus = (navigator.appName == "Netscape" && navigator.appVersion.substring(0,1) >= "4
用js写一个浮动广告
05-25
以下是一个简单的示例，使用 JavaScript 和 CSS 实现一个浮动广告： HTML 代码： ``` <div class="floating-ad"> <a href="#"><img src="path/to/image.jpg" alt="Floating Ad"></a> <button class="close-btn">×</button> </div> ``` CSS 代码： ```css .floating-ad { position: fixed; bottom: 20px; right: 20px; width: 300px; height: 250px; border: 1px solid #ccc; background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); z-index: 9999; } .close-btn { position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; border: none; background-color: #ccc; color: #fff; font-size: 16px; line-height: 20px; text-align: center; cursor: pointer; } ``` JavaScript 代码： ```js // 获取浮动广告元素和关闭按钮元素 const floatingAd = document.querySelector('.floating-ad'); const closeBtn = document.querySelector('.close-btn'); // 关闭按钮点击事件处理程序 closeBtn.addEventListener('click', () => { floatingAd.style.display = 'none'; }); // 页面滚动事件处理程序 window.addEventListener('scroll', () => { const scrollY = window.scrollY || window.pageYOffset; const adBottom = floatingAd.offsetTop + floatingAd.offsetHeight; const isAdVisible = adBottom > scrollY && floatingAd.offsetTop < scrollY + window.innerHeight; if (isAdVisible) { floatingAd.style.visibility = 'visible'; } else { floatingAd.style.visibility = 'hidden'; } }); ``` 说明： - `position: fixed` 属性使广告固定在浏览器窗口中。`bottom` 和 `right` 属性设置广告距离窗口底部和右侧的距离。 - 广告元素包含一个图片链接和一个关闭按钮，按钮使用绝对定位使其在广告元素的右上角。 - 当点击关闭按钮时，广告元素的 `display` 属性设置为 `none`，使其消失。 - 当页面滚动时，使用 `window.scrollY` 或 `window.pageYOffset` 获取当前滚动位置。如果广告元素的底部在可见窗口内，则将其 `visibility` 属性设置为 `visible`，否则设置为 `hidden`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值