<!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. 五个瓶颈影响你的Asp.Net程序(网站)性能

    在今天的手机设备世界里,生活的节奏继续加快,因此访问你的网站的用户的耐心也在渐渐失去.同时,我提供了非常多的特性,为了防止你的网站变得过时或者廉价,你必须跟上竞争对手.你想赢得访问者的喝彩,但访问者没 ...

  2. 比较windows phone 的回退事件与android的回退事件

    public void onBackPressed() { finish(); } 如果要做一个页面导航的功能的话,就我而言,认为,windows phone开发比android更加人性化,更加傻瓜化 ...

  3. What's the difference between - (one hyphen) and — (two hyphens) in a command?

    bash中看到这样的命令, curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash - sudo apt-get install - ...

  4. WordPress 后台上传自定义网站Logo

    需求: 众所周知一般网站的logo都是固定的所以我在做网站时也是使用的静态logo文件,但最近用wp给一个客户做的网站时,因为网站现在的logo可能会需要重新设计,所以客户提出了需要在后台可以自己修改 ...

  5. Transformer中引用iqd作为数据源的时候数据预览出现乱码

    在cognos开发利用transform建模的过程中导入iqd数据源预览乱码问题,下面先描述一下环境 操作系统版本: [root@enfo212 ~]# cat /proc/version Linux ...

  6. Unity异步加载场景loading条

    using UnityEngine; using System.Collections; public class LoadingScene : MonoBehaviour { public UISl ...

  7. [Javascript] Understand Curry

    The act of currying can be described as taking a multivariate function and turning it into a series ...

  8. Activity基本跳转

    详细解释:http://blog.csdn.net/xiazdong/article/details/7664757 简单介绍activity的跳转,通过intent实现,详细的注释在代码中.涉及到a ...

  9. Asp.Net 之 <%%>相关内联代码块用法

    1.<%@ ... %> 用来添加命名空间引用,如:<%@ import namespace="system.data"> 2.<% ... %> ...

  10. LESS详解之编译LESS

      掌握LESS,必须先掌握LESS的编译.因为LESS是CSS预处理语言的一种,是一种动态语言.LESS可以运行在各种语言和环境中,包括浏览器端.服务器端等.就因为是一种CSS预处理语言,所以需要编 ...