//jQuery将div等固定在浏览器右上角的方法
//$(window)：浏览器对象
//$(document.body)：body对象
//$(document):文档对象
(function($){// 拓展自jQuery
$.extend({// 静态方法写法(自定义一个叫osiris的类，避免与jQuery自身方法重名)
osiris : {
setTopRight : function($this){
$this.css({"display": "block", "position": "absolute", "text-align": "right"})
.animate( {
left : $(window).width() - $this.width()
}, 0)
$(window).scroll(function(){
$this.animate( {
top : $(document.body).scrollTop(),
left : $(window).width() - $this.width() + $(document.body).scrollLeft()
}, 0);
}).resize(function(){
$this.animate( {
left : $(window).width() - $this.width()
}, 0);
});
}
}
});
$.fn.extend({// 实例方法写法(这个我不会用自定义类的方法写成可以像“$(selector).osiris.setTopRight()”这样调用，会的同学欢迎提意见)
setTopRight : function(){
var $this =$(this);
$this.css({"display": "block", "position": "absolute", "text-align": "right"})
.animate( {
left : $(window).width() - $this.width()
}, 0)
$(window).scroll(function(){
$this.animate( {
top : $(document.body).scrollTop(),
left : $(window).width() - $this.width() + $(document.body).scrollLeft()
}, 0);
}).resize(function(){
$this.animate( {
left : $(window).width() - $this.width()
}, 0);
});
}
});
})(jQuery);
// 调用方法
$(document).ready(function(){
//$("#topRight").setTopRight(); //（1）实例方法，自身调用
$.osiris.setTopRight($("#topRight")); //（2）静态方法，调用jQuery的自定义类osiris里面的静态方法
})
// 用法：控件的直接parent标签必须是body，貌似是吧……
<body>
<div id="topRight" style="width:100px; position: absolute;">topRight</>
</body>
by:http://blog.csdn.net/qkhhimkfrgw/article/details/7353517
jQuery 2种添加扩展方式：将div固定在浏览器右上角的方法
最新推荐文章于 2022-03-23 14:54:18 发布
5879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
