<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>右下角浮动窗口</title>

<meta http-equiv="content-type" content="text/html;charset=UTF-8">

<style type="text/css">

#msg_win{

    position:absolute;

    right:0px;

    overflow:hidden;

    z-index:99;

    border:1px solid #c00;

    background:#F9EFFC;

    width:240px;

    font-size:12px;

    margin:0px;

    display:block;

    top:503px;

    visibility:visible;

    opacity:1;

    }

#msg_win .icos{

    position:absolute;

    top:2px;

    right:2px;

    z-index:9;

    }

.icos a{

    float:left;

    color:#FFFFFF;

    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:#FFCC00;

    }

#msg_title{

    background:#AC19E3;

    border-bottom:1px solid #710B97;

    border-top:1px solid #FFF;

    border-left:1px solid #FFF;

    color:#FFFFFF;

    height:25px;

    line-height:25px;

    text-indent:5px;

    font-weight:bold;

    }

#msg_content{

    margin:5px;

    margin-right:0;

    width:230px;

    height:126px;

    overflow:hidden;

    }

</style>

</head>

<body>

<div style="height:2000px;"></div>

<div id="msg_win" >

  <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">浮动窗口内容：欢迎提出宝贵意见，谢谢！</div>

</div>

<script language="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)

            }

        },6);//10 to 6

    },

    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();

            }

        },6);//10 to 6

    },

    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();

            },100);//600 mod 100

        };

        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>

</body>

</html>

效果图如下：

【js】右下角浮动窗口的更多相关文章

  1. QQ右下角浮动窗口

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  2. js右下角弹窗代码(实测好用)

    实测好用的js右下角弹窗代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  3. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  4. (转)JS浮动窗口（随浏览器滚动而滚动）

    原文:http://hi.baidu.com/aiyayaztt/item/4201c55a6b729dced2e10c79 JS浮动窗口(随浏览器滚动而滚动) 往往用于一些联系方式,互动平台模块,随 ...

  5. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  6. 电力项目十一--js添加浮动框

    1.添加浮动窗口样式 <!-- 浮动窗口样式css begin --> <style type="text/css"> #msg_win{border:1p ...

  7. js物理弹性窗口

    js物理弹性窗口 点击下载代码

  8. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法

    js捕捉IE窗口失去焦点事件,判断离开页面刷新或关闭的方法 javascript如何捕捉IE窗口失去焦点事件window.onblur = function(e) { //you code}; 弹框的 ...

随机推荐

  1. iOS:UITableViewCell自定义单元格

    UITableViewCell:自定义的单元格,可以在xib中创建单元格,也可以在storyBorad中创建单元格.有四种创建方式 <1>在storyBorad中创建的单元格,它是静态的单 ...

  2. 3维DEMO: 抽奖圆盘

    抽奖圆盘 前些日子去超市,消费满一定钱数可以参加抽奖,就是在电视机上有个可旋转的圆盘,按一键开始,按一键抽奖结束.看到最大奖的扇形区域大约有个10度角的样子,按说中大奖的概率应该是36分之1.当然,这 ...

  3. 支持5G-WiFi的安卓设备搜索不到5G信号解决方法

    安卓设备必须获得root权限,然后修改 /system/etc/wifi/nvram_net.txt 文件, 将ccode = CN 改为 ccode = ALL.保存并重启即可. 三星EK-GC11 ...

  4. 浅谈jQuery easyui datagrid操作单元格样式

    今天项目上遇到问题,就是表格风格统一的问题,由于用了2个不同的框架,所以如果要大修比较麻烦,考虑到修改表格样式工作量会少很多,所以考虑修改jQuery easyui datagrid数据网格的样式. ...

  5. WPF 控件回车移动焦点

    .Set the TabIndex=" . private void detailGrid_Keydown(object sender, KeyEventArgs e) { try { if ...

  6. WPF DataTrigger的两个用法

    1.用在textbox等输入控件上,验证输入是否合法.首先定义一个Converter, 2.Xaml里面这样子写,意思是输入的数字,如果小于100则显示为红色. 3.combox等列表控件里面,也可以 ...

  7. Ubuntu16.04下Neo4j图数据库官网安装部署步骤（图文详解）（博主推荐）

    不多说,直接上干货! 说在前面的话  首先,查看下你的操作系统的版本. root@zhouls-virtual-machine:~# cat /etc/issue Ubuntu LTS \n \l r ...

  8. zypper命令使用示例

    导读 Zypper是OpenSUSE和企业版SUSE中软件包管理器ZYpp的命令行接口. 主要用于:1.管理软件包:zypper可用来安装.删除.更新和查询本地或远程的软件包.2.管理仓库:zyppe ...

  9. 齐次坐标(Homogeneous Coordinates)

    原文:http://blog.163.com/m_note/blog/static/208197045201272341230195/ 齐次坐标(Homogeneous Coordinates) 问题 ...

  10. 当requestFocus不能立刻起作用时…

    不知道各位有没有遇到过这种情况: 第一次一个apk界面.然后本来想在某处requestFocus()使之获得焦点来显示的,可是直接调用却不行,如图1所看到的. 图1 焦点的位置 出现这种现象是Andr ...