<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>带关闭按钮的浮动窗口代码(全屏漂浮)</title>
</head>
<style type="text/css">
#fdck {border:1px solid #c0c0c0;margin:0 auto;padding:5px;background:#f0f0f0}
</style>
<body>
<div id="img" style="position: absolute; left: 311; top: 815;visibility :hidden;" onmouseover="clearInterval(interval)" onmouseout="interval = setInterval('changePos()', delay)" align="middle">
<span style="CURSOR:hand;color:red;font-weight:bold;font-size:12px" onclick="clearInterval(interval);img.style.visibility = 'hidden'">关闭</span>
<div id="fdck">
欢迎！
</div>
</div>
<script language=javascript>
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.style.visibility = "visible";
interval = setInterval('changePos()', delay);
}
start();
</script>
</body>
</html>
分享到：
相关推荐
【标题】中的“全屏漂浮广告图层效果源码”指的是一个编程代码资源，用于实现网页上的全屏广告展示，并且这个广告图层会在页面上浮动，吸引用户的注意力。这种效果常见于网页设计和前端开发中，用来提高广告的可见性...
8. **图片全屏浮动**：如果文件列表中包含“图片全屏浮动”，这可能意味着漂浮框内包含图片，并希望在全屏模式下依然保持浮动。这时，可能需要在全屏模式开启和退出时调整元素的定位方式或大小。 9. **响应式设计**...
53:关闭弹出两窗口的代码下载 54：鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58：点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
53:关闭弹出两窗口的代码下载 54：鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58：点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery...
7. **事件处理**：为了提供良好的用户体验，我们需要监听弹出层上的关闭按钮或其他关闭触发事件，用`.on()`方法绑定`click`事件并关闭弹出层。 8. **关闭弹出层**：当用户完成交互或点击关闭按钮时，使用jQuery的`....
Lightbox是一种常见的网页设计技术，它允许用户在点击图片时，弹出一个全屏或半屏的模态窗口，以更清晰、更大尺寸的方式查看图片。这种效果常用于照片画廊、产品展示或者任何需要强调图片细节的网页设计中。在本案例...
1. **弹出层基本概念**：弹出层，又称浮动窗口或模态窗口，是在页面原有内容之上显示一个半透明或全屏覆盖的独立窗口，用户需完成弹出层内的操作或关闭弹出层后才能继续与主页面交互。这种设计方式常用于不打断用户...
这种效果可以通过监听窗口的scroll事件，然后调整客服按钮或聊天框的位置来实现。 其次，"响应式"意味着插件必须能够根据设备的屏幕尺寸自动调整布局。这通常通过CSS3的媒体查询（Media Queries）来完成，它可以...
弹窗对话框是一种在网页上创建浮动窗口的方法，用于显示警告、确认信息或进行用户交互，如填写表单。在jQuery中，我们可以通过创建元素，然后利用CSS进行样式设置，最后通过JavaScript控制其显示与隐藏来实现弹窗...