js實現側懸浮浮動實例代碼（前端 浮動）

本文目錄一覽：

• 1、求個左下角JS廣告懸浮代碼？
• 2、求一個能用的右側浮動JS代碼
• 3、JS網頁中的浮動窗口代碼？
• 4、浮動窗口的代碼 （html/js）

求個左下角JS廣告懸浮代碼？

漫遊於網絡之間，你會發覺，因特網不但是信息的海洋，也是廣告的海洋。除了普通的Gif Banner、Flash外，浮動廣告也是時下網上較為流行的廣告形式之一。當你拖動瀏覽器的滾動條時，這種在頁面上浮動的廣告，可以跟隨屏幕一起移動。儘管這種效果對於廣告展示有相當的實用價值，但對瀏覽你網頁的人來講，這則是個既妨礙閱讀，又影響閱讀興趣的東西，因此一定不能濫用。不過，如果你能善用的話，它就能發揮出極大的作用。

要做出浮動式廣告的效果並不困難，如果你有JS基礎的可以自己寫一個，如果連寫都懶得寫的話，到網上下載一個特效工具，按提示粘貼一下代碼就OK。不過，想要真正了解它是怎樣做出來的，則需要掌握一些JS知識了。這裡向大家介紹一下簡單的浮動廣告做法。

以下這段代碼可放在body/body之間，其間我加入了一些注釋（即“//”後的文字及“!—”“–”之間的文字）。

SCRIPT FOR=window EVENT=onload LANGUAGE=”JScript”

initAd();//載入頁面後，調用函數initAd()

/SCRIPT

script language=”JScript”

!–

function initAd() {

document.all.AdLayer.style.posTop = -200;//設置onLoad事件激發以後，廣告層相對於固定後的y方向位置

document.all.AdLayer.style.visibility = ‘visible’//設置層為可見

MoveLayer(‘AdLayer’);//調用函數MoveLayer()

}

function MoveLayer(layerName) {

var x = 600;//浮動廣告層固定於瀏覽器的x方向位置

var y = 300;//浮動廣告層固定於瀏覽器的y方向位置

var diff = (document.body.scrollTop + y – document.all.AdLayer.style.posTop)*.40;

var y = document.body.scrollTop + y – diff;

eval(“document.all.” + layerName + “.style.posTop = y”);

eval(“document.all.” + layerName + “.style.posLeft = x”);//移動廣告層

setTimeout(“MoveLayer(‘AdLayer’);”, 20);//設置20毫秒後再調用函數MoveLayer()

}

//–

/script

!–下面為一個ID為AdLayer的層（如ID名不為AdLayer，上面MoveLayer()內的AdLayer也要作相應修改），包括一張帶鏈接的圖片–

div id=AdLayer style=’position:absolute; width:61px; height:59px; z-index:20; visibility:hidden;; left: 600px; top: 300px’

a href=” “img src=’../qqkk2000.gif’ border=”0″ height=”60” width=”60″/a

/div

在這裡，你可以設置x、y的值來設定所固定層的位置，改變setTimeout(“MoveLayer(‘AdLayer’);”, 20)中20的值為你希望調用MoveLayer()的時間間隔。還有要注意的是，使用的圖片最好為透明背景的gif圖，以使圖片的背景顏色不至於遮住後面的的內容。

切記，要慎用浮動式廣告，考慮使用特效的同時，千萬要考慮到瀏覽者的感覺，不能濫用哦！

求一個能用的右側浮動JS代碼

請將代碼放置在head/head之間即可

script language=”javascript”

suspendcode=”DIV id=lovexin style=’Z-INDEX: 10; LEFT: 850px; POSITION: absolute; TOP: 140px; width: 88px; height: 203px;’a href=”img src=’../20080128/er_p.jpg’ width=’150′ height=’200′ border=’0’/a/DIV”

document.write(suspendcode);

lastScrollY=0;

function heartBeat(){

diffY=document.body.scrollTop;

percent=.1*(diffY-lastScrollY);

if(percent0)percent=Math.ceil(percent);

else percent=Math.floor(percent);

document.all.lovexin.style.pixelTop+=percent;

lastScrollY=lastScrollY+percent;

}

window.setInterval(“heartBeat()”,1);

/script

代碼說明：

1、加到左側的時候,把left屬性改為10就好；

2、TOP是控制這個浮動廣告離上邊的距離，可以根據自己的實際情況進行調整；

3、這裡href=’和這裡img src=’../20080128/er_p.jpg’ 換成你想要的浮動廣告的圖片。其中這句src=../20080128/er_p.jpg’ width=’150′ height=’200’border=’0′ 中WIDTH=‘150’ height=’200’是你浮動廣告圖片的寬和高。

JS網頁中的浮動窗口代碼？

script

function scrolls(){

var advobj=document.getElementById(“adv”);

advobj.style.top=100+document.documentElement.scrollTop+”px”;

}

window.onscroll=scrolls;

function winclose(){

var advobj=document.getElementById(“adv”);

advobj.style.display=”none”;

}

/script

body

!–隨滾動條移動的浮動窗口############################–

div id=”adv” style=””

img src=”圖片路徑”/

div id=”close” onclick=”winclose()”關閉/div

/div

div id=”header”iframe src=”header.html” height=”155px” width=”960px” frameborder=”0″scrolling=”no”/iframe/div

/body

浮動窗口的代碼 （html/js）

第一種方法:

Html代碼

html

head

title浮動窗口/title

link type=”text/css” rel=”stylesheet” href=”css/overflow.css” /

script type=”text/javascript” src=”js/jquery.js”/script

script type=”text/javascript” src=”js/overflow.js”/script

script type=”text/javascript”

$(document).ready(function(){

var b = $(“#b”);

var overFlow = $(“#over”);

b.click(function(){

overFlow.fadeIn();

$(“#mask”).css(“background”,”#111″);

$(“#mask”).css(“opacity”,”0.8″);

})

$(“#close”).click(function(){

overFlow.fadeOut();

$(“#mask”).css(“background”,”#fff”);

$(“#mask”).css(“opacity”,”1″);

});

drag($(“#over”),$(“#title”));

}) ;

/script

/head

body

div id=”over”

div id=”title”span id=”t”這只是一個演示標題/spanspan id=”close”[ x ]/span/div

div id=”content”

When a container object, such as a div, has mouse capture, events originating on objects within that container are fired by the div, unless the bContainerCapture parameter of the setCapture method is set to false. Passing the value false causes the container to no longer capture all document events. Instead, objects within that container still fire events, and those events also bubble as expected.br/

—This is edited by Alp.

/div

/div

div id=”mask” a id=”b” href=”#”click/a/div

/body

/html

Js代碼

function drag(overFlow,title){

title.onmousedown = function(evt){

var doc = document;

var evt = evt || window.event;

var x = evt.offsetX?evt.offsetX:evt.layerX;

var y = evt.offsetY?evt.offsetY:evt.layerY;

if(overFlow.setCapture){

overFlow.setCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove = function(evt){

evt = evt || window.event;

var xPosition = evt.pageX || evt.clientX;

var yPosition = evt.pageY || evt.clientY;

var newX = xPosition – x;

var newY = yPosition – y;

overFlow.style.left = newX;

overFlow.style.top = newY;

};

doc.onmouseup = function(){

if(overFlow.releaseCapture){

overFlow.releaseCapture();

}else if(window.captureEvents){

window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

}

doc.onmousemove=null;

doc.onmouseup=null;

};

};

}

css代碼

#over{

position: absolute;

left: 300px;

top: 200px;

border: 1px solid black;

display: none;

background: #cccccc;

cursor: default;

width: 300px;

z-index: 10;

opacity: 1;

}

#title{

border: 1px solid #1840C4;

background: #95B4DC;

padding: 2px;

font-size:12px;

cursor: default;

}

#close{

cursor: pointer;

margin-right: 1px;

overflow: hidden;

}

#content{

border: 1px solid #C2D560;

background: #EFF4D7;

}

#t{

margin-right:145px;

}

#mask{

z-index: 1;

background: #fff;

width: 1024px;

height: 800px;

}

#b{

position: absolute;

left: 200px;

top: 100px;

}

body{

padding: 0px;

margin: 0px;

}

#over{

background: transparent;

}

第二種方法:

消息框遮罩層:iframe id=”show_upload_iframe” frameborder=0 scrolling=”no” style=”display:none; position:absolute;”/iframediv id=”show_upload”nothing…/div’

頁面加載loading中:div id=”body_loading” onClick=”loaded();”img src=”__PUBLIC__/images/body_load.gif”/div

關閉浮動窗口:a href=”javascript:hideupload()”關閉窗口建議用小圖片/a

打開浮動窗口:a href=”javascript:showupload(‘admin.php’)”打開浮動/a

// 消息框loading

function loading(){

var o = $(‘#body_loading’);

o.css(“left”,(($(document).width())/2-(parseInt(o.width())/2))+”px”);

o.css(“top”,(($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2))+”px”);

o.fadeIn(“fast”);

}

// 消息框消失

function loaded(){

var o = $(‘#body_loading’);

o.fadeOut(“fast”);

}

// 隱藏浮動窗口

function hideupload(){

$(‘#show_upload’).hide();

$(‘#show_upload_iframe’).hide();

}

// 彈出浮動窗口

function showupload(ajaxurl){

loading();

var o=$(‘#show_upload’);

var f=$(‘#show_upload_iframe’);

var top = 200;

$.ajax({

url: ajaxurl,

//cache: false,

success: function(res){

loaded();

o.html(res);

o.css(“left”,(($(document).width())/2-(parseInt(o.width())/2))+”px”);

if($(document).scrollTop()200){

top = ($(document).height()+$(document).scrollTop())/2-(parseInt(o.height())/2);

}

o.css(“top”,top+”px”);

f.css({‘width’:o.width(),’height’:o.height(),’left’:o.css(‘left’),’top’:o.css(‘top’)});

f.show();

o.show();

}

});

}