投稿
  1. 簡單一點首頁
  2. 編程

js腳本浮動窗代碼怎麼理解,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();

}

});

}

怎樣用javascript實現帶關閉窗口的浮動廣告

首先浮動的窗口就是一個層，在這個層上放置一個小的層，代表關閉按鈕，可以使用背景圖片，或者img，用小層裝，是為來方便固定位置，在這個小層中可以寫js代碼，當鼠標點擊是獲得大層，修改大層的隱藏屬性，這樣就實現來，整個層的關閉

在網頁中插入浮動窗口，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

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/309451.html

贊 (0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
小藍的頭像小藍
0 0
上一篇 2025-01-04 19:31
下一篇 2025-01-04 19:31

相關推薦

  • Python周杰倫代碼用法介紹

    本文將從多個方面對Python周杰倫代碼進行詳細的闡述。 一、代碼介紹 from urllib.request import urlopen from bs4 import Bea…

    GPYNH的頭像 GPYNH
    編程 2025-04-29

  • JS Proxy(array)用法介紹

    JS Proxy(array)可以說是ES6中非常重要的一個特性，它可以代理一個數組，監聽數據變化並進行攔截、處理。在實際開發中，使用Proxy(array)可以方便地實現數據的監…

    CUGEL的頭像 CUGEL
    編程 2025-04-29

  • Python字符串寬度不限制怎麼打代碼

    本文將為大家詳細介紹Python字符串寬度不限制時如何打代碼的幾個方面。 一、保持代碼風格的統一 在Python字符串寬度不限制的情況下，我們可以寫出很長很長的一行代碼。但是，為了…

    OQFRU的頭像 OQFRU
    編程 2025-04-29

  • Python基礎代碼用法介紹

    本文將從多個方面對Python基礎代碼進行解析和詳細闡述，力求讓讀者深刻理解Python基礎代碼。通過本文的學習，相信大家對Python的學習和應用會更加輕鬆和高效。 一、變量和數…

    BFAIW的頭像 BFAIW
    編程 2025-04-29

  • Python腳本控制其他軟件

    Python作為一種簡單易學、功能強大的腳本語言，具有廣泛的應用領域，在自動化測試、Web開發、數據挖掘等領域都得到了廣泛的應用。其中，Python腳本控制其他軟件也是Python…

    PABMG的頭像 PABMG
    編程 2025-04-29

  • Python滿天星代碼：讓編程變得更加簡單

    本文將從多個方面詳細闡述Python滿天星代碼，為大家介紹它的優點以及如何在編程中使用。無論是剛剛接觸編程還是資深程序員，都能從中獲得一定的收穫。 一、簡介 Python滿天星代碼…

    DCQKT的頭像 DCQKT
    編程 2025-04-29

  • 倉庫管理系統代碼設計Python

    這篇文章將詳細探討如何設計一個基於Python的倉庫管理系統。 一、基本需求 在着手設計之前，我們首先需要確定倉庫管理系統的基本需求。 我們可以將需求分為以下幾個方面： 1、庫存管…

    EKUXU的頭像 EKUXU
    編程 2025-04-29

  • 寫代碼新手教程

    本文將從語言選擇、學習方法、編碼規範以及常見問題解答等多個方面，為編程新手提供實用、簡明的教程。 一、語言選擇 作為編程新手，選擇一門編程語言是很關鍵的一步。以下是幾個有代表性的編…

    DIYUZ的頭像 DIYUZ
    編程 2025-04-29

  • Python實現簡易心形代碼

    在這個文章中，我們將會介紹如何用Python語言編寫一個非常簡單的代碼來生成一個心形圖案。我們將會從安裝Python開始介紹，逐步深入了解如何實現這一任務。 一、安裝Python …

    DKZPU的頭像 DKZPU
    編程 2025-04-29

  • 怎麼寫不影響Python運行的長段代碼

    在Python編程的過程中，我們不可避免地需要編寫一些長段代碼，包括函數、類、複雜的控制語句等等。在編寫這些代碼時，我們需要考慮代碼可讀性、易用性以及對Python運行性能的影響。…

    SSLAV的頭像 SSLAV
    編程 2025-04-29

發表回復

登錄後才能評論