正文
javascript浮动,web浮动例子
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
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
相关问答
Q1: javascript实现浮动通知栏
亲，这个CSS就能搞定哦！
#tz {
top: 100%;
height: 200px;
width: 100%;
position: fixed;
margin-top: -200px;
background-color: #000;/*为了方便识别，添加的背景颜色*/
Q2: 请教：如何用 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
Q3: 求问JAVASCRIPT如何制作网页浮动小窗口
静态的你会写吧？先把静态的写出来，再根据你点击的更多信息的项目来确定弹窗中的展示内容。关闭按钮用一个图片，给它设置点击事件，点击它的时候整个弹窗隐藏。
Q4: 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);
}
Q5: 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
