快捷導(dǎo)航

capacityFixed 基于jquery的類似于新浪微博新消息提示的定位框

更新時(shí)間：2011年05月24日 23:14:32 作者：

公司項(xiàng)目需求中有一個(gè)類似于新浪微博新消息提示的定位框的效果，需要的朋友可以參考下。

效果圖:

當(dāng)瀏覽器滾動(dòng)的時(shí)候，要浮層要移除瀏覽器界面視區(qū)的時(shí)候，修改其position屬性，讓其浮動(dòng)在窗口的上沿顯示就可以了，position：fixed，可以在IE7+和其他瀏覽器下浮動(dòng)層平滑固定定位，由于IE6前輩不支持fixed屬性，使用position：absolute屬性代替，重新計(jì)算top值。
具體代碼如下：
HTML代碼：

復(fù)制代碼代碼如下:

 
<div class="float" id="float"> 
<p id="WB_unread_msg_1303891276971">1條新私信，<a href="http://m.fzitv.net/">查看私信</a></p> 
<p id="WB_unread_msg_1303891276972">10條新消息，<a href="http://m.fzitv.net/">查看消息</a></p> 
<p id="WB_unread_msg_1303891276973">108個(gè)新粉絲，<a href="http://m.fzitv.net/">查看粉絲</a></p> 
<a href="#" title="關(guān)閉" id="" class="close-ico">關(guān)閉</a> 
</div> 

CSS代碼：

復(fù)制代碼代碼如下:

 
.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; background-image:url(img/close-ico.png); text-indent:-900px; overflow:hidden; } 
.float .close-ico:hover{ background-position:0 -16px;} 
.float p{ line-height:22px} 

JS代碼：

復(fù)制代碼代碼如下:

 
/** 
* @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,//相對(duì)于頁(yè)面寬度的右邊定位 
top:100, 
pageWidth : 960 
}; 
})(jQuery); 

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)帶延遲的二級(jí)tab切換下拉列表效果,涉及jquery鼠標(biāo)事件及頁(yè)面元素樣式動(dòng)態(tài)變換的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-09-09
jQuery多個(gè)input求和的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery多個(gè)input求和的實(shí)現(xiàn)方法,涉及jQuery獲取input表單元素值及運(yùn)算的相關(guān)技巧,需要的朋友可以參考下
2015-02-02
jquery each()源代碼
jquery文檔說(shuō) each(callback)作用是以每一個(gè)匹配的元素作為上下文來(lái)執(zhí)行一個(gè)函數(shù)。就是用each來(lái)遍歷數(shù)組，來(lái)執(zhí)行同一個(gè)方法
2011-02-02
jQuery 一個(gè)圖片切換的插件
B/S開(kāi)發(fā)的朋友，首頁(yè)常常需要一些新聞圖片切換的特效，鑒于jQuery良好的插件開(kāi)發(fā)機(jī)制，我也常常自己寫(xiě)一些實(shí)用的小插件，這里分享一個(gè)新聞圖片切換插件
2011-10-10
Jquery插件分享之氣泡形提示控件grumble.js
grumble.js 是一個(gè)很特別的氣泡形狀提示控件，最開(kāi)始是為 Huddle.com 網(wǎng)站開(kāi)發(fā)的, 它沒(méi)有通常的north/east/south/west的定位限制。
2014-05-05
jquery實(shí)現(xiàn)下拉框多選方法介紹
本文是利用EasyUI實(shí)現(xiàn)下拉框多選功能，在ComboxTree其原有的基礎(chǔ)上對(duì)樣式進(jìn)行了改進(jìn)，樣式表已上傳demo，下面跟著小編一起來(lái)看下吧
2017-01-01
JQuery常見(jiàn)節(jié)點(diǎn)操作實(shí)例分析
這篇文章主要介紹了JQuery常見(jiàn)節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了jQuery針對(duì)元素節(jié)點(diǎn)的添加、刪除常見(jiàn)操作函數(shù)使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2019-05-05
jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法示例
這篇文章主要介紹了jquery實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建form并提交的方法,結(jié)合實(shí)例形式分析了jQuery form表單創(chuàng)建與提交相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
jquery點(diǎn)贊功能實(shí)現(xiàn)代碼點(diǎn)個(gè)贊吧!
點(diǎn)贊功能很多地方都會(huì)出現(xiàn)，如何實(shí)現(xiàn)愛(ài)心點(diǎn)贊功能，這篇文章主要為大家詳細(xì)介紹了jquery點(diǎn)贊功能實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
jQuery圖片播放8款精美插件分享
與大家一起分享8款精美的jQuery圖片播放插件,有興趣的朋友可以下載使用和研究；廢話不多說(shuō)了，直接上這些插件,希望這些插件對(duì)你有所幫助
2013-02-02