CapacityFixed jquery_jquery に基づく Sina Weibo の新しいメッセージ プロンプトに似たボックスの配置

レンダリング:

ブラウザがスクロールするときに、フローティング レイヤーをブラウザ インターフェイスのビューポートから削除したい場合は、ウィンドウの上端にフローティングして表示されるように位置属性を変更するだけです。 、position:fixed は、IE7 およびその他のブラウザーでフローティング レイヤーをスムーズかつ固定的に配置できます。IE6 の以前のバージョンでは固定属性がサポートされていないため、代わりに Position:Absolute 属性を使用して上部の値を再計算します。
具体的なコードは次のとおりです:
HTML コード:

コードをコピー コードは次のとおりです:

1 件の新しいプライベート メッセージ、プライベート メッセージを表示

10 件の新着メッセージ、メッセージを見る

108 人の新規ファン、

閉じる

CSS コード:

コードをコピー コードは次のとおりです:

.float {幅:200px; パディング:5px 10px; フォントサイズ:12px; 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); ,.2) ; -moz-border-radius:5px; }
.close-ico{ 位置:絶対; 5px; 右: 5px; 幅: 16px; テキストインデント:-900px; .close-ico :hover{background-position:0 -16px;}
.float p{ line-height:22px}

JS コード:

コードをコピーします コードは次のとおりです:

/**
* @author Fool's Pier
* Sina Weibo の新しいメッセージ プロンプトに似た位置決めボックス
* 詳細
*/
(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; ":right,
"top":top
});
$(window).resize(function(){
var right = ($(window).width()-opts. pageWidth)/2 opts.css({
"right":right
});
$(window).scroll();
var スクロール = $ (this).scrollTop();
if (スクロール > トップ) {

if (window.XMLHttpRequest) {
element.css({
位置: "固定",
トップ: 0
}); else {
element.css({
トップ: スクロール
}); >}else {
element.css({
位置: "絶対",
トップ: トップ
});
}
}); ".close-ico") .click(function(event){
element.remove();
event.preventDefault();
})
} return $(this) ).each(function() {
FixedFun($(this));
});
$.fn.capacityFixed.deflunt={
right : 100,/ /ページ幅を基準にして右に配置
top:100,
pageWidth : 960
})(jQuery);