javascript实现div浮动在网页最顶上并带关闭按钮效果实例

复制代码

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、雅安服务器托管、营销软件、网站建设、白银区网站维护、网站推广。

代码如下:

html

head

titlejavascript实现div浮动在网页最顶上并带关闭按钮效果实例/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"悬浮在网页顶部可关闭的工具条（浮动层），点击可以关闭哦/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实现浮动通知栏

亲，这个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如何制作网页浮动小窗口

静态的你会写吧？先把静态的写出来，再根据你点击的更多信息的项目来确定弹窗中的展示内容。关闭按钮用一个图片，给它设置点击事件，点击它的时候整个弹窗隐藏。

Javascript按钮点击浮动窗口，需要能在父窗口的范围内随机移动（不超出父窗口的位置范围）

按照如下修改函数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如何实现弹出浮动窗口

html

head

titleJs弹出浮动窗口，支持鼠标拖动和关闭/title

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

script type="text/javascript"

/**

关于一些参数说明：

*bodycontent:要在窗口显示的内容，dom对象

*title:窗口标题，字符串类型

*removeable:窗口能否拖动，布尔类型

*注意：内容窗体的高度是height-30px，请计算好你要显示的内容的高度和宽度。弹出窗的id为"223238909"，所以你的页面不要再取值为"223238909"的id了，以防js执行出错*/

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

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

/*创建窗口的组成元素*/

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);

/*组装对话框主体内容*/

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);

}

/*实现窗口的移动，这段代码很典型，网上很多类似的代码*/

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

!-- 要嵌入到窗口的内容 --

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"//td

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

/tr

tr

td链接地址/td

tdinput name="link.url" type="text"//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

网页名称：javascript浮动,web浮动例子
文章URL：http://kswjz.com/article/dsdooeg.html