<!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. 一键切换皮肤的解决思想及iframe嵌套时寻找下级iframe的方法

    项目中有个一键切换皮肤的功能,感觉还不错,记录下,就是各颜色样式设置起来太复杂了,不知道有没有更简便的方法: 1.切换皮肤结构层 <li title="<s:text name= ...

  2. jquery制作一个简单的轮播

    效果图: 演示地址: http://ae6623.cn/demo/slider/index.html 思路: 利用css的定位属性 left 进行调整图片的显示,每次点击上一页下一页按钮的时候,-图片 ...

  3. Navicat安装激活

    有条件的同学麻烦不要使用下面的激活步骤,仅供个人学习使用 ...... ...... ...... ...... 一.去官网下载最新Navicat软件https://www.navicat.com.c ...

  4. Struts2(六)result

    一.result简述 result:输出结果:第个Action返回一个字符串,Struts2根据这个值来决定响应结果 name属性:result的逻辑名.和Actin里的返回值匹配,默认"s ...

  5. touch 命令(转)

    原文:http://www.cnblogs.com/peida/archive/2012/10/30/2745714.html linux的touch命令不常用,一般在使用make的时候可能会用到,用 ...

  6. Linux操作系统启动界面（字符or图形界面）的设置及切换方法

    安装完Linux操作系统后,默认是从图形界面启动的.那么如何使得系统从字符界面启动呢? 打开一个命令终端: #vim /etc/inittab 修改 id::initdefault: 为 id::in ...

  7. UML类图聚集与组合的区别

    http://blog.csdn.net/zwf0713/article/details/2025922 设计模式中组合和聚集好像挺相似,但有一定区别. 1-在图上的区别是,聚集用空心,组合用实心: ...

  8. CSS3 选择器浏览器兼容性汇总 IE8

    1.css选择器 css(包括css1.css2和css3)有哪些选择器? http://www.w3school.com.cn/cssref/css_selectors.asp 2.CSS3选择器 ...

  9. 纯jascript解决手机端拍照、选图后图片被旋转问题

    需要的js1 需要的js2 这里主要用到Orientation属性. Orientation属性说明如下: 旋转角度 参数 0° 1 顺时针90° 6 逆时针90° 8 180° 3 <!DOC ...

  10. 【线程篇】stop() 和suspend()

    1.为什么不推荐用 stop()和 suspend() stop这个方法将终止所有未结束的方法,包括run方法.当一个线程停止时候,他会立即释放所有他锁住对象上的锁.这会导致对象处于不一致的状态.假如 ...