jQuery 浮動廣告實現代碼

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

實現方法：複製代碼代碼如下:<!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">
<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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery 浮動廣告實現代碼

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support