快捷導(dǎo)航

jQuery(1.3.2) 7行代碼搞定跟隨屏幕滾動的層

更新時間：2009年05月21日 03:07:26 作者：

jQuery(1.3.2)7行代碼搞定跟隨屏幕滾動的層，代碼很精簡啊，非常不錯。

<!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>jquery.text-effects</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
#test{ 
    position:absolute; 
    top:10px; 
    right:10px; 
    width:130px; 
    height:60px; 
    background:#555; 
    color:#fff; 
    font-size:13px; 
} 
</style> 
<script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    var menuYloc = $("#test").offset().top; 
    $(window).scroll(function (){ 
        var offsetTop = menuYloc + $(window).scrollTop() +"px"; 
        $("#test").animate({top : offsetTop },{ duration:600 , queue:false }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <h1>7行代碼的跟隨屏幕滾動層.</h1> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <div id="test">Dev By CssRain.cn<br/>Test ie6+,firefox3.0</div> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
</body> 
</html> 

您可能感興趣的文章:

相關(guān)文章

jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼,通過使用jquery動態(tài)操作頁面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價值,需要的朋友可以參考下
2015-08-08
jquery遍歷select元素(實(shí)例講解)
本篇文章主要是對jquery遍歷select元素的實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-12-12
jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡單實(shí)例
本篇文章主要是對jquery實(shí)現(xiàn)點(diǎn)擊彈出層效果的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報告每日天氣的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿騰訊微博滑出效果報告每日天氣的方法,涉及jQuery鼠標(biāo)事件及css樣式操作技巧,需要的朋友可以參考下
2015-05-05
基于jQuery ligerUI實(shí)現(xiàn)分頁樣式
這篇文章主要為大家詳細(xì)介紹了基于jQuery ligerUI實(shí)現(xiàn)分頁樣式,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
jQuery生成asp.net服務(wù)器控件的代碼
jQuery生成asp.net服務(wù)器控件但不幸的是，該服務(wù)器控件依然沒有起作用，還是用隱藏服務(wù)器控件來解決吧
2010-02-02
jQuery前端框架easyui使用Dialog時bug處理
本文介紹了在jQuery前端框架easyui開發(fā)UI時，使用Dialog時發(fā)現(xiàn)遮罩無法覆蓋頁面內(nèi)容，而且對話框也顯示不出來，經(jīng)過一番研究，才發(fā)現(xiàn)問題所在，這里分享給大家，有相同情況的小伙伴可以參考下
2014-12-12
jQuery Mobile頁面跳轉(zhuǎn)后未加載外部JS原因分析及解決
Web開發(fā)進(jìn)行頁面跳轉(zhuǎn)時在pageB中引用的JS并未成功運(yùn)行，針對這個問題本文給予了詳細(xì)的解決方法，感興趣的你可以參考下哈，希望可以幫助到你
2013-03-03
jquery checkbox實(shí)現(xiàn)單選小例
checkbox是復(fù)選框如何將其變?yōu)閱芜x呢？下面有個不錯的示例，感興趣的朋友可以參考下
2013-11-11
DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序(圖文詳解)
DOM事件標(biāo)準(zhǔn)定義了兩種事件流，這兩種事件流有著顯著的不同并且可能對你的應(yīng)用有著相當(dāng)大的影響。這兩種事件流分別是捕獲和冒泡。和許多Web技術(shù)一樣，在它們成為標(biāo)準(zhǔn)之前，Netscape和微軟各自不同地實(shí)現(xiàn)了它們，下面介紹DOM事件階段以及事件捕獲與事件冒泡先后執(zhí)行順序
2015-08-08