简单实现js浮动框


Posted in Javascript onDecember 13, 2016

本文实例为大家分享了js浮动框的实现代码,供大家参考,具体内容如下

一.在需要加入浮动框的页面中加入如下css代码

<!-- 浮动窗口样式css begin -->
<style type="text/css">
#msg_win {
  border: 1px solid #A67901;
  background: #EAEAEA;
  width: 240px;
  position: absolute;
  right: 0;
  font-size: 12px;
  font-family: Arial;
  margin: 0px;
  display: none;
  overflow: hidden;
  z-index: 99;
}
#msg_win .icos {
  position: absolute;
  top: 2px;
  *top: 0px;
  right: 2px;
  z-index: 9;
}
.icos a {
  float: left;
  color: #833B02;
  margin: 1px;
  text-align: center;
  font-weight: bold;
  width: 14px;
  height: 22px;
  line-height: 22px;
  padding: 1px;
  text-decoration: none;
  font-family: webdings;
}
.icos a:hover {
  color: #fff;
}
#msg_title {
  background: #BBDEF6;
  border-bottom: 1px solid #A67901;
  border-top: 1px solid #FFF;
  border-left: 1px solid #FFF;
  color: #000;
  height: 25px;
  line-height: 25px;
  text-indent: 5px;
}
#msg_content {
  margin: 5px;
  margin-right: 0;
  width: 230px;
  height: 126px;
  overflow: hidden;
}
</style>
<!-- 浮动窗口样式css end -->

二.js代码(注意:该代码要添加整个页面最后,目的是页面加载完成时加载它)

<!-- 浮动窗口js,必须要放置到最后 begin-->
<script type="text/javascript">
var Message={
  set: function() {//最小化与恢复状态切换
    var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'展开'];
    this.minbtn.status=set[0];
    this.win.style.borderBottomWidth=set[1];
    this.content.style.display =set[2];
    this.minbtn.innerHTML =set[3]
    this.minbtn.title = set[4];
    this.win.style.top = this.getY().top;
  },
  close: function() {//关闭
    this.win.style.display = 'none';
    window.onscroll = null;
  },
  setOpacity: function(x) {//设置透明度
    var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
    this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
    this.win.style.filter = v;
    this.win.style.opacity = x / 100;
  },
  show: function() {//渐显
    clearInterval(this.timer2);
    var me = this,fx = this.fx(0, 100, 0.1),t = 0;
    this.timer2 = setInterval(function() {
      t = fx();
      me.setOpacity(t[0]);
      if (t[1] == 0) {clearInterval(me.timer2) }
    },10);
  },
  fx: function(a, b, c) {//缓冲计算
    var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
    return function() {return [a += cMath((b - a) * c), a - b]}
  },
  getY: function() {//计算移动坐标
    var d = document,b = document.body, e = document.documentElement;
    var s = Math.max(b.scrollTop, e.scrollTop);
    var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
    var h2 = this.win.offsetHeight;
    return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
  },
  moveTo: function(y) {//移动动画
    clearInterval(this.timer);
    var me = this,a = parseInt(this.win.style.top)||0;
    var fx = this.fx(a, parseInt(y));
    var t = 0 ;
    this.timer = setInterval(function() {
      t = fx();
      me.win.style.top = t[0]+'px';
      if (t[1] == 0) {
        clearInterval(me.timer);
        me.bind();
      }
    },10);
  },
  bind:function (){//绑定窗口滚动条与大小变化事件
    var me=this,st,rt;
    window.onscroll = function() {
      clearTimeout(st);
      clearTimeout(me.timer2);
      me.setOpacity(0);
      st = setTimeout(function() {
      me.win.style.top = me.getY().top;
      me.show();
      },600);
    };
    window.onresize = function (){
      clearTimeout(rt);
      rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
    }
  },
  init: function() {//创建HTML
    function $(id) {return document.getElementById(id)};
    this.win=$('msg_win');
    var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
    for (var Id in set) {this[Id] = $(set[Id])};
    var me = this;
    this.minbtn.onclick = function() {me.set();this.blur()};
    this.closebtn.onclick = function() {me.close()};
    this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
    this.minbtn.innerHTML=this.char[0];
    this.closebtn.innerHTML=this.char[2];
    setTimeout(function() {//初始化最先位置
      me.win.style.display = 'block';
      me.win.style.top = me.getY().foot;
      me.moveTo(me.getY().top);
    },0);
    return this;
  }
};
Message.init();
</script>
<!-- 浮动窗口js end-->

三.html代码(注意:该代码要放置到body的最后)

<!-- 浮动窗口html代码 begin -->
<hr>
<div id="msg_win" style="display: block; top: 490px; visibility: visible; opacity: 1;">
 <div class="icos">
  <a id="msg_min" title="最小化" href="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×</a>
 </div>
 <div id="msg_title">设备运行情况--></div>
 <div id="msg_content" style="overflow: auto; height: 150px; width: 100%; white-space: nowrap">
  ${commonMsg.devRun } 
 </div>
</div>
<!-- 浮动窗口html代码 end -->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
jquery parent和parents的区别分析
Oct 02 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
webpack4.0打包优化策略整理小结
Mar 30 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
javascript中this关键字详解
Dec 12 #Javascript
深入理解javascript函数参数与闭包
Dec 12 #Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 #Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 #Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 #Javascript
深入理解javascript中concat方法
Dec 12 #Javascript
js仿微信语音播放实现思路
Dec 12 #Javascript
You might like
基于OpenCV的PHP图像人脸识别技术
2009/10/11 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
初识Javascript小结
2015/07/16 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
原生js实现数字字母混合验证码的简单实例
2015/12/10 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
微信小程序 UI布局常用技巧整理总结
2016/12/05 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
JavaScript中数组常见操作技巧
2017/09/01 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
angularJS开发注意事项
2018/05/26 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
微信小程序tabBar设置实例解析
2019/11/14 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
vue相关配置文件详解及多环境配置详细步骤
2020/05/19 Javascript
微信小程序实现转盘抽奖
2020/09/21 Javascript
python中利用xml.dom模块解析xml的方法教程
2017/05/24 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
简单几步用纯CSS3实现3D翻转效果
2019/01/17 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
洛杉矶时尚女装系列:J.ING US
2019/03/17 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
军训考核自我鉴定
2014/02/13 职场文书
商场客服专员岗位职责
2014/06/13 职场文书