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