简单实现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 相关文章推荐
window.open()弹出居中的窗口
Feb 01 Javascript
JQuery 构建客户/服务分离的链接模型中Table分页代码效率初探
Jan 22 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 Javascript
AngularJs 60分钟入门基础教程
Apr 03 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
Apr 17 Javascript
echarts3 使用总结(绘制各种图表,地图)
Jan 05 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
Jun 12 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
JS实现时间校验的代码
May 25 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
PHP的变量总结 新手推荐
2011/04/18 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
根据json字符串生成Html的一种方式
2013/01/09 Javascript
js判断60秒以及倒计时示例代码
2014/01/24 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
浅谈Vuex的状态管理(全家桶)
2017/11/04 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
庆七一活动方案
2014/01/25 职场文书
优秀护士事迹材料
2014/12/25 职场文书
入队仪式主持词
2015/07/04 职场文书
幼儿园教师辞职信
2019/06/21 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL