本文目錄一覽：
- 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
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″
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
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/zh-hant/n/130840.html
微信掃一掃 
支付寶掃一掃 