js实现浮动窗体实例（网站浮动飘窗js）

本文目录一览：

1、浮动窗口的代码（html/js）
2、js css 动态悬浮窗怎么做
3、在网页中插入浮动窗口，js代码或css代码（易看易懂）
4、javascript如何实现弹出浮动窗口
5、JS网页中的浮动窗口代码？

浮动窗口的代码（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 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();

}

});

}

js css 动态悬浮窗怎么做

你说的动态悬浮窗不知道说的是哪一种，姑且认为是浏览器网页打开之后跑来跑去的那种，只讲大概思路，代码你自己去敲哈，这样才能充分吸收

回归正题，动态悬浮窗，可以拆开理解，一个是动、一个悬浮。

一、先讲悬浮这个概念，首先这个东西能够在浏览器窗口显示，能够飘来飘去还不影响网页里面其他内容的正常显示，那么怎么才能实现呢？没错，就是定位！那么又有个问题是用绝对定位还是固定定位？这个就看是想让这个小东西是在整个文档中飘还是浏览器的可视窗口飘了（正常情况下都是在浏览器可视窗口飘，即固定定位），至于为什么不是相对定位，请看w3c手册；

二、现在悬浮的问题解决了，就剩一个问题了那就是动动动动动动动起来，那么怎么才能让他动起来呢？这里就需要用到setInterval 、clientWidth和clientHeight；首先获取当前浏览器窗口的宽、高即document.documentElement.clientWidth和document.documentElement.clientHeight，然后获取这个浮动小窗的初始位置，那么高潮部分来了，怎么才能动呢？不要急慢慢来。

初始盒子位置在左上角，然后判断如果盒子距离浏览器窗口右边距离大于0，那么向右移动y一步，同样距离浏览器窗口下边距离大于0那么向下移动一步，当盒子距离浏览器窗口右边距离等于0时像左移动一步，同样距离浏览器窗口下边距离等于0时向上移动一步，然后设置定时器，多久循环一次

以上就是动态悬浮窗的大概思路（卧槽，终于打完了手好累！！！）

在网页中插入浮动窗口，js代码或css代码（易看易懂）

给你一段代码，创建了一个大小100*100的浮动窗口，贴着窗口的右边。

css代码：

style type=”text/css”

#my_dialog {

position: fixed; /*固定定位*/

right: 0;

top: 50%; /*贴着右边，垂直位置50%*/

height: 100px;

width: 100px; /*尺寸 100 x 100*/

transform: translate(0, -50%); /*通过位移，保证浮动窗口的垂直居中*/

box-shadow: 0 0 3px 1px rgba(180, 180, 180, 0.5);

background-color: white; /*加些背景色和阴影，以便区分*/

}

/style

html代码：

div id=”my_dialog”

!–窗口内容–

/div

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″

td width=”78″链接文字/td

td width=”168″input name=”link.name” type=”text”//td

td width=”138″ id=”linktext”/td

/tr

td链接地址/td

tdinput name=”link.url” type=”text”//td

td id=”linkurl”/td

/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

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

原创文章，作者：R3XCF，如若转载，请注明出处：https://www.506064.com/n/130840.html

js实现浮动窗体实例（网站浮动飘窗js）

本文目录一览：

浮动窗口的代码 （html/js）

js css 动态悬浮窗 怎么做

在网页中插入浮动窗口，js代码或css代码（易看易懂）

javascript如何实现弹出浮动窗口

JS网页中的浮动窗口代码？

相关推荐

发表回复

浮动窗口的代码（html/js）

js css 动态悬浮窗怎么做