html
<style type="text/css">
.fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; }
.fdOnline{ background:url(index/images/online.png) no-repeat; width:255px; height:181px; position:fixed; left:50%; margin-left:-128px; top:40%; z-index:999; border-radius: 15px; box-shadow: 0 0 20px rgba(10, 2, 4, 0.75);}
.fdOnline .fdOClose{ width:44px; height:44px; display:block; margin-top:-17px; margin-right:-6px;}
.fdOnline .fdOTel{ background:#CF3; width:127px; height:58px; display:block; margin-top:123px;}
.fdOnline .fdOOn{ background:#036; width:128px; height:58px; display:block; margin-top:96px;}
</style>
<div class="fdBonTel">
<img src="index/images/fdTel.gif" usemap="#Maps">
<map name="Maps" id="Maps">
<area shape="rect" coords="2,2,79,52" onClick="openZoosUrl();">
<area shape="rect" coords="77,2,166,52" href="tel:0855-8253310">
<area shape="rect" coords="166,4,242,51" onClick="openZoosUrl();">
<area shape="rect" coords="248,5,318,53" onClick="openZoosUrl();">
</map>
</div>
<div class="fdOnline" id="fdOnline">
<a href="###" class="fdOClose f_r" onclick="closeOnline();"><img src="index/images/closeBtn.png" width="44" height="44"></a>
<a href="###" class="fdOTel f_l"></a>
<a href="###" class="fdOOn f_r"></a>
</div>
js
// JavaScript Document
document.writeln("<style type=\"text/css\">");
document.writeln(".fdBonTel{ width:100%; height:53px; position:fixed; background:#0052ae; text-align:center; left:0; bottom:0; z-index:999; }");
document.writeln(".fdOnline{ background:url(index/images/online.png) no-repeat; width:255px; height:181px; position:fixed; left:50%; margin-left:-128px; top:40%; z-index:999; border-radius: 15px; box-shadow: 0 0 20px rgba(10, 2, 4, 0.75);}");
document.writeln(".fdOnline .fdOClose{ width:44px; height:44px; display:block; margin-top:-17px; margin-right:-6px;}");
document.writeln(".fdOnline .fdOTel{ width:127px; height:58px; display:block; margin-top:123px;}");
document.writeln(".fdOnline .fdOOn{ width:128px; height:58px; display:block; margin-top:96px;}");
document.writeln("</style>");
document.writeln("<div class=\"fdBonTel\">");
document.writeln(" <img src=\"index/images/fdTel.gif\" usemap=\"#Maps\">");
document.writeln(" <map name=\"Maps\" id=\"Maps\">");
document.writeln(" <area shape=\"rect\" coords=\"2,2,79,52\" onClick=\"openZoosUrl();\">");
document.writeln(" <area shape=\"rect\" coords=\"77,2,166,52\" href=\"tel:0855-8253310\">");
document.writeln(" <area shape=\"rect\" coords=\"166,4,242,51\" onClick=\"openZoosUrl();\">");
document.writeln(" <area shape=\"rect\" coords=\"248,5,318,53\" onClick=\"openZoosUrl();\">");
document.writeln(" </map>");
document.writeln("</div>");
document.writeln("<div class=\"fdOnline\" id=\"fdOnline\">");
document.writeln(" <a href=\"###\" class=\"fdOClose f_r\" onclick=\"closeOnline();\"><img src=\"index/images/closeBtn.png\" width=\"44\" height=\"44\"></a>");
document.writeln(" <a href=\"###\" class=\"fdOTel f_l\"></a>");
document.writeln(" <a href=\"###\" class=\"fdOOn f_r\"></a>");
document.writeln("</div>");
function showOnline() {
if (document.getElementById("fdOnline")) {
if (document.getElementById("fdOnline").style.display == "none") {
document.getElementById("fdOnline").style.display = "block";
}
}
}
function closeOnline() {
document.getElementById("fdOnline").style.display = "none";
setInterval(chkSWT, 30000);
};
$(function(){
setInterval(showOnline, 30000);
});
效果图：
相关推荐
总结来说，“jQuery版简单易用的可拖动右下角浮动窗口”是一个利用jQuery实现的实用工具，通过结合JavaScript事件处理和CSS定位技术，为网页提供了一种灵活、可定制的浮动窗口解决方案。这样的组件对于提升网页的...
JS实现手机端浮动窗口效果主要涉及到的知识点涵盖了Web前端开发中的...以上知识点总结了如何利用JavaScript和CSS技术实现一个简单易用的手机端浮动窗口显示效果，通过这些技术手段可以创建动态、交互性强的Web界面。
《jQuery版简单易用的可拖动右下角浮动窗口特效》 在现代网页开发中，用户界面的交互性越来越受到重视，一个优秀的交互设计能够提升用户体验，使网站或应用更具吸引力。本教程将深入探讨如何利用jQuery实现一个简单...
"jQuery版简单易用的可拖动右下角浮动窗口特效"就是一个这样的例子，它是一个轻量级且易于集成的解决方案，用于创建可自定义位置的在线客服或通知功能。这个特效使用户能够通过拖动将悬浮窗口定位在页面的任何角落，...
总的来说，这款由Andyfoo创作的JS浮动窗口插件，凭借其强大的功能、易用性和良好的封装性，为网页开发者提供了强大且灵活的工具。无论是初学者还是经验丰富的开发者，都可以从中受益，快速实现富有交互性的网页浮动...
在这个浮动窗口的例子中，jQuery的灵活性和易用性得到了充分的体现。 1. **HTML结构**：页面的基础结构通常包括一个用于承载浮动窗口的容器元素，以及窗口内的内容元素。例如： ```html 这里是浮动窗口的内容 ``...
"一款漂亮的基于纯js实现的浮动网站客服窗口代码" 这个标题表明我们关注的是一个专门设计用于网站的客服交互窗口。它强调了“漂亮”，这意味着该客服窗口在视觉设计上有着良好的用户体验，同时也指出它是用纯...
“DIV层弹出”则强调了库的弹出对话框特性，可以创建出类似系统警告或用户输入的浮动窗口。“JS版DIV层”意味着所有的操作都是通过JavaScript实现的，而不是依赖于其他服务器端技术，这样可以实现动态效果，提高网页...
在ECShop中，我们可以通过修改模板文件、添加JavaScript和CSS代码，以及调整数据库配置来实现浮动客服窗口。 1. **设计客服窗口界面** 创建一个HTML模板文件，用于展示客服窗口的外观。可以包括客服头像、名称、...
开发者只需要编写简单的JavaScript代码，就可以实现广告的动态跟随效果。 在实际应用中，使用这个插件时，首先需要在网页中引入jQuery库（如果尚未引入）。然后，将该插件的JavaScript文件添加到页面中，一般是在`...
在网页设计中，"js页面向下滚动浮动层"是一种常见的用户体验优化技术，它使得特定的元素（如导航菜单）在用户滚动页面时始终保持在屏幕的可见区域。这种效果可以增加用户的交互性和易用性，特别是在内容丰富的长页面...
这个功能让用户能够轻松查看图片的局部细节，而无需离开当前页面或打开新的窗口。它在电商网站、艺术画廊或者任何需要展示高清晰度图像的场景中尤为有用。 实现HTML放大镜功能，通常涉及到以下几个关键技术点： 1....
2. **定位策略**：浮动提示框需要根据用户的滚动行为进行动态定位，这通常通过JavaScript的窗口滚动事件（`window.onscroll`）来实现。当用户滚动时，更新提示框的位置，使其始终保持在屏幕的某个区域，如右上角或...
总的来说，这个压缩包提供的JavaScript代码为开发者提供了一个高效、兼容且易用的解决方案，用于创建浮动广告图片，以提升网站的广告展示效果。通过深入理解并运用这些代码，开发者可以快速地在自己的网页项目中集成...
"js浮动弹出框特效jquery"是利用jQuery来实现的一种常见交互功能，它允许在用户与页面交互时动态显示信息或提示，而这种浮动弹出框通常被称为对话框或者模态窗口。 首先，让我们深入了解一下jQuery库。jQuery是由...
jQuery弹出层窗口插件popupWindow.js是一款基于jQuery的轻量级组件，它极大地简化了在Web应用中创建模态对话框或浮动窗口的过程。这个插件提供了丰富的功能，包括最大化、最小化、窗口拖拽以及自定义尺寸调整，使得...
在JavaScript中，创建弹出窗口主要通过`window.open()`函数来实现，但此方法通常用于打开新的浏览器窗口或标签页，而不是创建浮动的弹出层。在描述中提到的“点击灰色部分窗口自动消失”可能是指一种模态对话框...
baguetteBox.js是一个简单易用的JavaScript库，它提供了一种优雅的方式来创建响应式的图片画廊，支持触摸设备，并且无需依赖其他库。以下是其主要特点： 1. **无插件**：baguetteBox.js是纯JavaScript实现，无需...
**jQuery万能浮动框插件**...总之，jQuery万能浮动框插件通过简单易用的API，帮助开发者快速创建符合项目需求的浮动框效果，提高网站的互动性和用户体验。它结合了jQuery的强大功能与CSS的灵活性，为Web开发带来便利。