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 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 Javascript
对vue中v-on绑定自定事件的实例讲解
Sep 06 Javascript
浅析JavaScript异步代码优化
Mar 18 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
利用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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP中通过fopen()函数访问远程文件示例
2014/11/18 PHP
PHP接入微信H5支付的方法示例
2019/10/28 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
javascript面向对象的方式实现的弹出层效果代码
2010/01/28 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
2014/06/20 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
2014/11/28 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
JS判断页面是否出现滚动条的方法
2015/07/17 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
让mocha支持ES6模块的方法实现
2020/01/14 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python基于itchat模块实现微信防撤回
2019/04/29 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python使用gdal对shp读取,新建和更新的实例
2020/03/10 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
French Connection官网:女装、男装及家居用品
2019/03/18 全球购物
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
红旗渠导游词
2015/02/09 职场文书
小学校本教研总结
2015/08/13 职场文书
2016元旦主持人经典开场白台词
2015/12/03 职场文书
Java生成读取条形码和二维码的简单示例
2021/07/09 Java/Android
Redis命令处理过程源码解析
2022/02/12 Redis