javascript實現(xiàn)div浮動在網(wǎng)頁最頂上并帶關閉按鈕效果實例

復制代碼

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名注冊、雅安服務器托管、營銷軟件、網(wǎng)站建設、白銀區(qū)網(wǎng)站維護、網(wǎng)站推廣。

代碼如下:

html

head

titlejavascript實現(xiàn)div浮動在網(wǎng)頁最頂上并帶關閉按鈕效果實例/title

style

type="text/css"

!--

body

{

margin:

0px;padding:

0px;text-align:

center;}

TD

{FONT-SIZE:

12px;

COLOR:

#333;}

#toubiao

{BORDER-BOTTOM:

#e2e2e2

1px

solid;}

--

/style

/head

body

SCRIPT

function

toueme(){

document.getElementById("toubiao").style.display="none";

}

/SCRIPT

DIV

id=toubiao

table

width="100%"

border="0"

cellspacing="0"

cellpadding="5"

tr

td

width="82%"a

target="_blank"

href="/"

span

style="text-decoration:

none"font

color="#808080"懸浮在網(wǎng)頁頂部可關閉的工具條（浮動層），點擊可以關閉哦/font/span/a/td

td

width="14%"

align="right"a

style="CURSOR:

hand"

onClick=toueme()

img

src="../img/close3.gif"

hspace="6"

border=0/a/td

/tr

/table

/DIV

/body

/html

/td

/tr

/table

javascript實現(xiàn)浮動通知欄

親，這個CSS就能搞定哦！

#tz?{

top:?100%;

height:?200px;

width:?100%;

position:?fixed;

margin-top:?-200px;

background-color:?#000;/*為了方便識別，添加的背景顏色*/

請教：如何用 JavaScript 做一個隨機飄動的 "浮動元素"？

把下面這段代碼加到BODY ........后面

DIV id=ly2

style="HEIGHT: 128px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 150px"A

href="prodlist.php?departmentid=3" target=_blankIMG

src="images/hadef.gif" border=0/A/DIV

SCRIPT

PI=3.1416;

if (window.screen.width==1024)

{

center_x=400;

center_y=300;

}

if (window.screen.width==800)

{

center_x=300;

center_y=200;

}

function _locate_layer(this_layer,cx,cy,x,y)

{

this_layer.style.top=document.body.scrollTop+cy-y;

this_layer.style.left=document.body.scrollLeft+cx+x;

}

// ly2:move sin-----------------------------------------------------

_move_sin_ly2_run=1;

_move_sin_ly2_i=0;

function _move_sin_ly2(x_step,y_step)

{

x=_move_sin_ly2_i;

y=Math.sin(x/50)*y_step;

_move_sin_ly2_i=_move_sin_ly2_i+x_step;

_locate_layer(ly2,0,center_y,x,y);

if (x(window.screen.width-250)) _move_sin_ly2_i=0;

}

function _move_sin_ly2_pro()

{

_move_sin_ly2(2,75);

if (_move_sin_ly2_run) setTimeout("_move_sin_ly2_pro()",100);

}

function _move_sin_ly2_pro_pause()

{

_move_sin_ly2_run=0;

}

function _move_sin_ly2_pro_play()

{

_move_sin_ly2_run=1;

_move_sin_ly2_pro();

}

// ly2:move sin------------------------------------------------------

_move_sin_ly2_pro();

/SCRIPT

求問JAVASCRIPT如何制作網(wǎng)頁浮動小窗口

靜態(tài)的你會寫吧？先把靜態(tài)的寫出來，再根據(jù)你點擊的更多信息的項目來確定彈窗中的展示內(nèi)容。關閉按鈕用一個圖片，給它設置點擊事件，點擊它的時候整個彈窗隱藏。

Javascript按鈕點擊浮動窗口，需要能在父窗口的范圍內(nèi)隨機移動（不超出父窗口的位置范圍）

按照如下修改函數(shù)b應該就可以了

function b(){

new_screenX = window.screenX + Math.random()*(800-200);

new_screenY = window.screenY + Math.random()*(600-200);

window.open("b.html","浮動窗口","toolbar=1, location=1, status=0, menubar=1,width=200,height=200,screenX="+new_screenX+",screenY="+new_screenY);

}

javascript如何實現(xiàn)彈出浮動窗口

html

head

titleJs彈出浮動窗口，支持鼠標拖動和關閉/title

meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/

script?type="text/javascript"

/**

關于一些參數(shù)說明：

*bodycontent:要在窗口顯示的內(nèi)容，dom對象

*title:窗口標題，字符串類型

*removeable:窗口能否拖動，布爾類型

*注意：內(nèi)容窗體的高度是height-30px，請計算好你要顯示的內(nèi)容的高度和寬度。彈出窗的id為"223238909"，所以你的頁面不要再取值為"223238909"的id了，以防js執(zhí)行出錯*/

function?createdialog(width,height,bodycontent,title,removeable){

if(document.getElementById("www_phpstudy_net")==null){

/*創(chuàng)建窗口的組成元素*/

var?dialog?=?document.createElement("div");

var?dialogtitlebar=?document.createElement("div");

var?dialogbody?=?document.createElement("div");

var?dialogtitleimg?=?document.createElement("span");

var?dialogtitle?=?document.createElement("span");

var?dialogclose?=?document.createElement("span");

var?closeaction?=?document.createElement("button");

/*為窗口設置一個id，id如此怪異是為了盡量避免與其他用戶取的id相同而出錯*/

dialog.id?=?"223238909";

/*組裝對話框標題欄,按從里到外的順序組裝*/

dialogtitle.innerHTML?=?title;

dialogtitlebar.appendChild(dialogtitleimg);

dialogtitlebar.appendChild(dialogtitle);

dialogtitlebar.appendChild(dialogclose);

dialogclose.appendChild(closeaction);

/*組裝對話框主體內(nèi)容*/

if(bodycontent!=null){

bodycontent.style.display?=?"block";

dialogbody.appendChild(bodycontent);

}

/*組裝成完整的對話框*/

dialog.appendChild(dialogtitlebar);

dialog.appendChild(dialogbody);

/*設置窗口組成元素的樣式*/

var?templeft,temptop,tempheight//窗口的位置（將窗口放在頁面中間的輔助變量）

var?dialogcssText,dialogbodycssText;//拼出dialog和dialogbody的樣式字符串

templeft?=?(document.body.clientWidth-width)/2;

temptop?=?(document.body.clientHeight-height)/2;

tempheight=?height-30;

dialogcssText=?"position:absolute;background:#65c294;padding:1px;border:4px;top:"+temptop+"px;left:"+templeft+"px;height:"+height+"px;width:"+width+"px;";

dialogbodycssText?=?"width:100%;background:#ffffff;"+"height:"?+?tempheight?+?"px;";

dialog.style.cssText?=?dialogcssText;

dialogtitlebar.style.cssText?=?"height:30px;width:100%;background:url(images/titlebar.png)?repeat;cursor:move;";

dialogbody.style.cssText??=?dialogbodycssText;

dialogtitleimg.style.cssText?=?"float:left;height:20px;width:20px;background:url(images/40.gif);"+"display:block;margin:4px;line-height:20px;";

dialogtitle.style.cssText?=?"font-size:16px;float:left;display:block;margin:4px;line-height:20px;";

dialogclose.style.cssText??=?"float:right;display:block;margin:4px;line-height:20px;";

closeaction.style.cssText?=?"height:20px;width:24px;border-width:1px;"+"background-image:url(images/close.png);cursor:pointer;";

/*為窗口元素注冊事件*/

var?dialogleft?=?parseInt(dialog.style.left);

var?dialogtop?=?parseInt(dialog.style.top);

var?ismousedown?=?false;//標志鼠標是否按下

/*關閉按鈕的事件*/???????

closeaction.onclick?=?function(){

dialog.parentNode.removeChild(dialog);

}

/*實現(xiàn)窗口的移動，這段代碼很典型，網(wǎng)上很多類似的代碼*/

if(removeable?==?true){

var?ismousedown?=?false;

var?dialogleft,dialogtop;

var?downX,downY;

dialogleft?=?parseInt(dialog.style.left);

dialogtop?=?parseInt(dialog.style.top);

dialogtitlebar.onmousedown?=?function(e){

ismousedown?=?true;

downX?=?e.clientX;

downY?=?e.clientY;

}

document.onmousemove?=?function(e){

if(ismousedown){

dialog.style.top?=?e.clientY?-?downY?+?dialogtop?+?"px";

dialog.style.left?=?e.clientX?-?downX?+?dialogleft?+?"px";

}

}

/*松開鼠標時要重新計算當前窗口的位置*/

document.onmouseup?=?function(){

dialogleft?=?parseInt(dialog.style.left);

dialogtop?=?parseInt(dialog.style.top);

ismousedown?=?false;

}

}

return?dialog;?

}//end?if(if的結束)

}

/script

style

table{background:#b2d235;}

button{font-size:12px;height:23;background:#ece9d8;border-width:1;}

#linkurl,#linkname,#savelink{width:100px;}

/style

/head

body

!--?顯示窗口的地方?--

div?id="here"/diva?id="clickhere"?href="#"點擊生成窗口/a

!--?要嵌入到窗口的內(nèi)容?--

div?id="login"?style="display:none;"

form?action="#"?method="post"?onSubmit="return?false;"

table?width="400"?height="95"

tr

td?width="78"鏈接文字/td

td?width="168"input?name="link.name"?type="text"http://td

td?width="138"?id="linktext"/td

/tr

tr

td鏈接地址/td

tdinput?name="link.url"?type="text"http://td

td?id="linkurl"/td

/tr

tr

td/td

tdbutton?type="submit"?style="float:right;"添加/button/td

td?id="savelink"/td

/tr

/table

/form

/div

script?type="text/javascript"

var?here?=?document.getElementById("here");

var?login?=?document.getElementById("login");

var?clickhere?=?document.getElementById("clickhere");

clickhere.onclick?=?function(){

here.appendChild(createdialog(400,95+30,login,"歡迎光臨phpstudy",true));

}

/script

/body

/html