jQuery之浮动窗口实现代码(两种方法)
网络编程 发布日期：2024/10/12 浏览次数：1
正在浏览：jQuery之浮动窗口实现代码(两种方法)
第一种方法:
预览:
Html代码
复制代码 代码如下:
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/overflow.js"><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="/UploadFiles/2021-04-02/body_load.gif">
关闭浮动窗口:<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();
}
});
}
预览:
Html代码
复制代码 代码如下:
<html>
<head>
<title>浮动窗口</title>
<link type="text/css" rel="stylesheet" href="css/overflow.css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/overflow.js"><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="/UploadFiles/2021-04-02/body_load.gif">
关闭浮动窗口:<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();
}
});
}
几个月来，英特尔、微软、AMD和其它厂商都在共同推动“AI PC”的想法，朝着更多的AI功能迈进。在近日，英特尔在台北举行的开发者活动中，也宣布了关于AI PC加速计划、新的PC开发者计划和独立硬件供应商计划。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。
在此次发布会上，英特尔还发布了全新的全新的酷睿Ultra Meteor Lake NUC开发套件，以及联合微软等合作伙伴联合定义“AI PC”的定义标准。