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 相关文章推荐
this[] 指的是什么内容 讨论
Mar 24 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
JavaScript中this的使用详解
Nov 08 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
Jan 02 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
Sep 14 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
php基础知识:控制结构
2006/12/13 PHP
PHP 图片上传代码
2011/09/13 PHP
php自动获取关键字的方法
2015/01/06 PHP
PHP利用二叉堆实现TopK-算法的方法详解
2017/04/24 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
两个Javascript小tip资料
2010/11/23 Javascript
jQuery仿Excel表格编辑功能的实现代码
2013/05/01 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JavaScript实现鼠标点击导航栏变色特效
2017/02/08 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
python基础教程之面向对象的一些概念
2014/08/29 Python
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
python实现下载文件的三种方法
2017/02/09 Python
Python实现完整的事务操作示例
2017/06/20 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
面试后的英文感谢信
2014/02/01 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
2014年网管工作总结
2014/12/11 职场文书
期末个人总结范文
2015/02/13 职场文书
如何书写你的职业生涯规划书?
2019/06/27 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL