<!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>
// 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 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);
效果图：
相关推荐
一个简单的浮动窗口可能包含一个容器div，以及里面的内容元素，例如： ```html 这是浮动窗口的内容 ``` 然后，我们需要为这个浮动窗口设置CSS样式。这里的关键是设置`position: fixed`，以及合适的`top`、`...
以上就是一个简单的客服QQ浮动窗口的实现方式。在实际应用中，开发者可能需要根据具体需求进行更复杂的定制，例如添加动画效果、优化用户体验、适应不同设备的屏幕尺寸等。总的来说，理解和掌握JavaScript和CSS的...
在JavaScript中实现浮动窗口效果，主要是通过操作DOM元素的CSS属性来实现的。浮动窗口通常用于网站上的广告或者在线客服功能，它会始终出现在浏览器窗口的某个固定位置，即使用户滚动页面，窗口仍然保持可见。 首先...
总结来说，“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的实用工具，通过结合JavaScript事件处理和CSS定位技术，为网页提供了一种灵活、可定制的浮动窗口解决方案。这样的组件对于提升网页的...
标题中的“javascript实现浮动窗口传值”指的是在网页中使用JavaScript技术来创建一个浮动窗口（通常是弹出框或对话框）并与主页面或其他窗口进行数据交互。这种功能常见于提示信息、用户输入验证或者在不刷新整个...
一个最简单的浮动窗口的例子，js代码完整，窗口可以关闭后可再显示。
在网页设计中，弹出层和浮动窗口是常见且实用的交互元素，它们能够提供丰富的信息展示和用户交互体验。本文将深入探讨一款由国内JS达人Andyfoo开发的支持拖动和关闭功能的JS浮动窗口插件，其在网页素材中的应用广泛...
JS实现手机端浮动窗口效果主要涉及到的知识点涵盖了Web前端开发中的...以上知识点总结了如何利用JavaScript和CSS技术实现一个简单易用的手机端浮动窗口显示效果，通过这些技术手段可以创建动态、交互性强的Web界面。
JavaScript是一种广泛应用于网页和网络...总的来说，实现可拖动的浮动窗口涉及到JavaScript事件处理、DOM操作和简单的数学计算。通过学习和理解这个过程，开发者可以创建出更多互动性的网页元素，提升用户的交互体验。
这款应用程序的核心功能是在浮动窗口中显示各种内容，这些窗口始终保持在其他应用程序之上，使得用户可以在处理多个任务时快速切换和查看信息，无需频繁地最小化或关闭当前窗口。 首先，我们要了解Pennywise的跨...
总的来说，这个jQuery版的可拖动右下角浮动窗口特效是通过结合HTML结构、CSS样式和JavaScript/jQuery脚本来实现的，它为用户提供了一种直观且灵活的方式来控制页面上的浮动元素，是网页交互设计中一个实用的技巧。...
本源码收集了19款基于jquery-css3实现的js遮罩弹窗效果,弹出层，就是大家熟悉的浮动窗口，由html5 CSS3 JS jQuery联合实现的可自定义的弹出窗口，实例效果丰富，调用简单，初学者也可看懂。一个HTML5页面演示了19种...
总的来说，"jQuery版简单易用的可拖动右下角浮动窗口特效"是一个实用的网页开发工具，它通过简单的代码实现了用户友好的交互功能。无论是用于在线客服系统还是其他类型的浮动提示，都能提升网站的专业性和用户满意度...
《jQuery页面右下角浮动窗口实现详解》 在网页设计中，为了提升用户体验，开发者常常会采用各种交互式元素，其中一种常见的设计是将提示、通知或者广告等信息以浮动窗口的形式显示在页面的右下角。这个"jQuery页面...
JavaScript部分是实现页面内超级酷浮动窗口的核心。这段代码主要完成了以下功能： 1. **定义变量**：包括坐标位置(`x0`, `y0`, `x1`, `y1`)、偏移量(`offx`, `offy`)、是否可移动(`moveable`)、背景色变化(`hover`,...
在网页设计中，表单和浮动窗口是两个重要的概念，它们在交互性和用户体验方面起着关键作用。让我们分别深入探讨这两个主题。 首先，我们来看一下浮动窗口，也称为IFrame（Inline Frame）。IFrame允许在一个HTML文档...
整合这些资源，开发者可以在自己的网站上简单地引入和配置，就能实现一个具备QQ在线客服功能的浮动窗口。用户点击后，会打开一个与QQ客服的聊天窗口，从而实现无缝的用户支持体验。 总的来说，QQ浮动客服js和文件...
在JavaScript中，`drag()`函数使用`onmousedown`、`onmousemove`和`onmouseup`事件监听鼠标操作，计算鼠标按下时的位置与浮动窗口位置的偏移量，然后根据鼠标移动的新位置更新窗口的`left`和`top`属性，实现拖动效果...
在“最简单好用的jQuery浮动代码”这个主题中，我们将深入探讨如何利用jQuery实现元素的浮动效果，这在网页布局和交互设计中非常常见。 首先，让我们了解浮动的基本概念。在CSS中，浮动（Float）是一种布局方式，常...