JS实现简单易用的手机端浮动窗口显示效果


Posted in Javascript onSeptember 07, 2016

本文实例讲述了JS实现简单易用的手机端浮动窗口显示效果。分享给大家供大家参考,具体如下:

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);
});

效果图:

JS实现简单易用的手机端浮动窗口显示效果

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery和javascript中如何将一元素的内容赋给另一元素
Jan 09 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
详解性能更优越的小程序图片懒加载方式
Jul 18 Javascript
vue.js自定义组件directives的实例代码
Nov 09 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
详解vue高级特性
Jun 09 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 Javascript
Vue与React的区别和优势对比
Dec 18 Vue.js
利用Angularjs实现幻灯片效果
Sep 07 #Javascript
轻松掌握JavaScript状态模式
Sep 07 #Javascript
JS简单实现tab切换效果的多窗口显示功能
Sep 07 #Javascript
JS实现的幻灯片切换显示效果
Sep 07 #Javascript
javascript宿主对象之window.navigator详解
Sep 07 #Javascript
Angular 理解module和injector,即依赖注入
Sep 07 #Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 #Javascript
You might like
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
Laravel框架源码解析之入口文件原理分析
2020/05/14 PHP
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
2013/02/18 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
七夕情人节丘比特射箭小游戏
2015/08/20 Javascript
基于jquery实现ajax无刷新评论
2020/08/19 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[54:53]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第二场
2014/05/23 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python编写屏幕截图程序方法
2015/02/18 Python
python实现文本文件合并
2015/12/29 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
python脚本调用iftop 统计业务应用流量的思路详解
2019/10/11 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
星空联盟C# .net笔试题
2014/12/05 面试题
上班睡觉检讨书
2014/01/09 职场文书
委托书范文
2014/04/02 职场文书
实习协议书范本
2014/04/22 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Python中itertools库的四个函数介绍
2022/04/06 Python
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android