網站浮窗代碼
<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>
❷ 網頁html代碼求助，全屏懸浮窗，
用fancybox插件
❸ html(網頁)浮動窗口，如何製作html(網頁)浮動窗口
浮動窗口可以很簡單的弄個，就是一個div 樣式<div style=" position:fixed; top:50%; left:50%; width:100px; height:50px; margin:-25px 0 0 -50px; ">內容</div>
❹ 網站懸浮窗代碼js控制修改
js裡面應該根據這個樣式來設置了滑鼠懸浮事件。找到這個地方修改一下針對當前標簽控制顯示
❺ 如何製作html(網頁)浮動窗口
製作方法：
將下列代碼輸入html軟體
❻ 網頁設計求懸浮窗代碼
{
width:100px;
height:130px;
background:red;
position:absolute;
right:0;
bottom:0;
}
中的position屬性值改為fixed。搞定
❼ 求html浮窗代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>test</title>
</head>
<body onload="init();">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td>test page</td></tr>
</table>
<div id="divContent" style="position: absolute; top: 200px; filter: alpha(opacity=70); background-Color:green;display:none;" ><!-- opacity=70調整透明度，數值自定義 -->
<table width="200" height="100">
<tr>
<td>username</td>
<td><input type="text"></td>
</tr>
<tr>
<td>password</td>
<td><input type="password"></td>
</tr>
<tr>
<td><input type="button" onclick="closeWin();" value="ok"></td>
<td><input type="button" onclick="closeWin();" value="cancle"></td>
</tr>
</table>
</div>
</body>
<script language="javascript">
function init()
{
setTimeout("showWin()", 1000); //1000表示1秒鍾
}
function showWin()
{
var div = document.getElementById("divContent");
div.style.display = "block";
}
function closeWin()
{
var div = document.getElementById("divContent");
div.style.display = "none";
}
</script>
</html>
具體的樣式你自己在<div id="divContent" style="position: absolute; top: 200px; filter: alpha(opacity=70); background-Color:green;display:none;" >里設定
❽ 求HTML網站中的漂浮窗口代碼````
<div id="img" style="position:absolute; left:35px; top:556px; width:120; height:172">
<a href="/"qyml7.htm"> <img border="0" src="/"lo1.gif" width="140" height="120"></a></p>
</div>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var xPos = 20;
var yPos = document.body.clientHeight;
var step = 1;
var delay = 30;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img.style.top = yPos;
function changePos() {
width = document.body.clientWidth;
height = document.body.clientHeight;
Hoffset = img.offsetHeight;
Woffset = img.offsetWidth;
img.style.left = xPos + document.body.scrollLeft;
img.style.top = yPos + document.body.scrollTop;
if (yon) {
yPos = yPos + step;
}
else {
yPos = yPos - step;
}
if (yPos < 0) {
yon = 1;
yPos = 0;
}
if (yPos >= (height - Hoffset)) {
yon = 0;
yPos = (height - Hoffset);
}
if (xon) {
xPos = xPos + step;
}
else {
xPos = xPos - step;
}
if (xPos < 0) {
xon = 1;
xPos = 0;
}
if (xPos >= (width - Woffset)) {
xon = 0;
xPos = (width - Woffset);
}
}
function start() {
img.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
// End -->
</script>
❾ html怎麼實現這網頁中的懸浮窗
在這里有教程啊，網頁鏈接，你自己看看吧。
❿ 浮動窗口的代碼 （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">這只是一個演示標題</span><span 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;"></iframe><div 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();
}
});
}