仿新浪微博浮动的消息提示框-智能定位_网页布局

仿新浪微博浮动的消息提示框-智能定位: 发布时间：2019-12-15编辑：脚本学堂

仿新浪微博新消息提示框，支持智能浮动定位框，新浪微博用来提示消息时候的智能定位框，可以适时关闭窗口，基于Jquery实现，方便好用。

<!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>仿<a href=http://www.sina.com.cn target=_blank class=infotextkey>新浪</a>微博新消息提示的智能浮动定位框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css"> 
*{margin:0;padding:0;}
body{font:12px/1.8 Arial;color:#666;}
h1.tit-h1{font-size:38px;text-align:center;margin:30px 0 15px;color:#f60;}
.go-back{text-align:center;border-top:1px dashed #ccc;padding:10px;margin-top:20px;font-size:40px;}
.wrap{border:1px dashed #ccc;background:#f8f8f8;padding:20px;}
.demo{height:1500px;}
.float{width:200px;padding:5px 10px;border:1px solid #ffecb0;font-size:12px;background-color:#fffee0;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2);box-shadow:1px 1px 2px rgba(0,0,0,.2);position:absolute;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.float .close-ico{position:absolute;top:5px;right:5px;display:block;width:16px;height:16px;}
/* Head Fixed */
.fixed-top{position:fixed;bottom:auto;top:0px;}
/* Foot Fixed */
.fixed-bottom{position:fixed;bottom:0px;top:auto;}
/* Left Fixed */
.fixed-left{position:fixed;right:auto;left:0px;}
/* RIGHT Fixed */
.fixed-right{position:fixed;right:0px;left:auto;}
* html,* html body{background-attachment:fixed;}
/* IE6 Head Fixed */
* html .fixed-top{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
/* IE6 RIGHT Fixed */
* html .fixed-right{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
/* IE6 Foot Fixed */
* html .fixed-bottom{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}
/* IE6 Left Fixed */
* html .fixed-left{position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}
</style> 
<script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.6.2.min.js"></script>
<script type="text/javascript">
/**
 * @author：愚人码头
 * 类似于新浪微博新消息提示的定位框
 */
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
right : 100,//相对于页面宽度的右边定位
        top:150,
        pageWidth : 960
	};
})(jQuery);
</script>
</head>
<body>
<div style="height:2000px;"></div>
<div class="wrap">
	<div class="float" id="float">
		<p>1条新私信，<a href="#">查看私信</a></p>
		<p>108个新粉丝，<a href="#">查看粉丝</a></p>
		<a href="#" title="关闭" id="" class="close-ico">×</a>
	</div>
</div>
<script type="text/javascript">
$("#float").capacityFixed();
</script>
</body>
</html>

提示：可修改代码后再运行!

上一篇：基于jquery实现的拖动浮动层
下一篇：让图片DIV竖向滑动的JavaScript特效代码

与仿新浪微博浮动的消息提示框-智能定位有关的文章

本文标题：仿新浪微博浮动的消息提示框-智能定位
本页链接：http://www.jb200.com/tx/37.html

浏览排行

栏目分类

热点文章

仿新浪微博浮动的消息提示框-智能定位