简单实现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 相关文章推荐
a标签的href和onclick 的事件的区别介绍
Jul 26 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
使用Javascript判断浏览器终端设备(PC、IOS(iphone)、Android)
Jan 04 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
如何在Angular应用中创建包含组件方法示例
Mar 23 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
php URL编码解码函数代码
2009/03/10 PHP
如何离线执行php任务
2017/02/21 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
python使用协程实现并发操作的方法详解
2019/12/27 Python
Django Haystack 全文检索与关键词高亮的实现
2020/02/17 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
CSS3 开发工具收集
2010/04/17 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
入党思想汇报
2014/01/05 职场文书
幼儿园家长评语
2014/02/10 职场文书
优秀团员自我评价范文
2014/04/23 职场文书
学雷锋活动总结范文
2014/04/25 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
工程资料员岗位职责
2015/04/13 职场文书
起诉书格式范文
2015/05/20 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
关于远足的感想
2015/08/10 职场文书
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL