|
|
復制代碼 代碼如下:
<!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>浮動廣告</title>
<style type="text/css">
#qqonline{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
left:16px;
width:100px;
height:120px;
}
#qqonline1{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
right:16px;
width:100px;
height:120px;
}
</style>
<script src="../js/jquery-1.2.6.js" type="text/Javascript"></script>
<script type="text/Javascript">
$(this).scroll(function() { // 頁面發生scroll事件時觸發
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
$("#qqonline").css("top", 100 + bodyTop) // 設置層的CSS樣式中的top屬性, 注意要是小寫，要符合“標準”
$("#qqonline").text(bodyTop); // 設置層的內容，這里只是顯示當前的scrollTop
$("#qqonline1").css("top", 100 + bodyTop)
$("#qqonline1").text(bodyTop);
});
</script>
</head>
<body style="height:1800px"><!-- 給BODY加個樣式，讓頁面出現滾動條 -->
<form id="form1" runat="server">
</form>
<div id="qqonline">
QQ在線服務
</div>
<div id="qqonline1">
QQfsdf在線服務
</div>
</body>
</html>
基于jquery的 浮動廣告 控制代碼
最近接觸jquery,學了點皮毛,為了滿足boss的需求弄了個相對屏幕靜止的浮動層,把代碼記在這里,以防自己以后用到
下面是jquery代碼,需要jquery類庫的支持才能運行,我寫文章的時候jquery的版本是1.3.2,不保證其他的版本能完美運行,代碼的基本原理寫在注釋里,如果你看不懂,那么你需要補充Javascript和jquery的基本知識,不用太多,因為我寫這個的時候也不會什么....
$(document).ready(function(){
$(window).scroll( function() { //這個函數可以監視瀏覽器滾動條,只要滾動條一移動,此函數就觸發
var diffY = $(window).scrollTop();//頁面現在的位置和滾動條頂端的距離[scrollTop()]
var diffH = $(window).height()/4;//設計者期望的浮動欄與瀏覽器頂端的距離[height()],這里是與瀏覽器頂端保持1/4個頁面的高度,如果diffH的值設置成0,浮動欄就會落在屏幕頂端
var percent=diffY+diffH; //percent將被賦值給css中的"top"屬性,作為浮動欄的新高度值
if(percent<0){ //判斷percent的值是否小于0,小于0就湊整,大于0就忽略小數部分
percent=Math.ceil(percent);
}else{
percent=Math.floor(percent); //取整
var v = percent+"px"; //css的屬性需要一個單位,這里是px
$("#adright").css("top",v);//percent被賦值給top屬性,瀏覽器根據這個值動態的調整浮動欄的高度,如果按照上面給的代碼,這個高度將正好讓浮動欄一直保持在屏幕中央
}
});
///////////////////////////////////////////// JS和HTML 的分割線 /////////////////////////////////////////////////////////////////////
下面是HTML代碼,只要把這部分放在HTML頁面中就行了,動態頁面php,jsp,ASP等應該也沒問題.....我是放在頁面尾部</body>的上方的,想放圖片,文字,flash就放在<div>XXXX</div>中的XXXX位置就可以了,如果想浮動在頁面左面,就把right:25px;改成left:25px;
<div id="adright" style = "right:25px; position:absolute; top:200px;"><a href="http://www.jb51.NET">腳本之家</a></div>
JavaScript技術：jQuery 浮動廣告實現代碼，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
