您的位置：首页 > Web前端 > JQuery
转 jquery div随屏幕滚动

2010-06-19 15:53 169 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{    margin:0;    padding:0; } .cssrain{    background:#BBB;    border:2px double #000000;    height:200px;    width:200px;    padding:10px; /*加了padding 也无影响.*/ } </style> <script src="http://www.cssrain.cn/demo/1/SildeTab/jquery-1.2.6.pack.js" type="text/javascript"></script> <script> /** * followDiv plugin (跟随屏幕滚动的DIV) * Copyright (c) 2008 CssRain (CssRain.cn) * (Use)使用方法： *   $('#div1').followDiv(); *   $('#div1').followDiv("rightbottom"); *     $('#div2').followDiv("leftbottom"); *     $('#div3').followDiv("lefttop"); *     $('#div4').followDiv("righttop"); * 兼容 IE6+ ，FF2+ . * 如有问题，请联系我。Email: cssrain@gmail.com * 或者去我的blog 留言。http://www.cssrain.cn */;(function($) {$.fn.extend({    "followDiv":function(str){        var _self = this;        var pos; //层的绝对定位位置        switch(str){            case("rightbottom")://右下角                pos={"right":"0px","bottom":"0px"};                break;            case("leftbottom")://左下角                pos={"left":"0px","bottom":"0px"};                break;                case("lefttop"): //左上角                pos={"left":"0px","top":"0px"};                break;            case("righttop")://右上角                pos={"right":"0px","top":"0px"};                break;            default :   //默认为右下角                pos={"right":"0px","bottom":"0px"};                break;        }        /*FF和IE7可以通过position:fixed来定位，*/        _self.css({"position":"fixed","z-index":"9999"}).css(pos);        /*ie6需要动态设置距顶端高度top.*/        if($.browser.msie && $.browser.version == 6) {                _self.css('position','absolute');                                        $(window).scroll(function(){                    var topIE6;                    if(str=="rightbottom"||str=="leftbottom"){                        topIE6=$(window).scrollTop() + $(window).height() - _self.outerWidth();                    }else if(str=="lefttop"||str=="righttop"){                        topIE6=$(window).scrollTop();                    }else{                        topIE6=$(window).scrollTop() + $(window).height() - _self.outerWidth();                    }                    _self.css( 'top' , topIE6 );                });        }        return _self;  //返回this，使方法可链。    }});})(jQuery);$(document).ready(function(){   $('#div1').followDiv();   $('#div2').followDiv("leftbottom");   $('#div3').followDiv("lefttop");   $('#div4').followDiv("righttop");}); </script></head><body><div style="width:100%;height:600px;">test</div><div class="cssrain" id="div1">跟随屏幕滚动的层1</div><div class="cssrain" id="div2">跟随屏幕滚动的层2</div><div class="cssrain" id="div3">跟随屏幕滚动的层3</div><div class="cssrain" id="div4">跟随屏幕滚动的层4</div><div style="width:100%;height:600px;">test</div></body></html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航