<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>测试</title>
<style type="text/css">
body {
background: #333333;
}
#winpop {
width: 400px;
height: 0px;
position: absolute;
right: 0;
bottom: 0;
border: 1px solid #999999;
margin: 0;
padding: 1px;
overflow: hidden;
display: none;
background: #FFFFFF
}
#winpop .title {
width: 100%;
height: 20px;
line-height: 20px;
background: #FFCC00;
font-weight: bold;
text-align: center;
font-size: 12px;
}
#winpop .con {
width: 100%;
height: 80px;
line-height: 80px;
font-weight: bold;
font-size: 12px;
color: red;
text-decoration: none;
text-align: center
}
#silu {
font-size: 13px;
color: #999999;
position: absolute;
right: 400px;
bottom: 400px;
text-align: right;
text-decoration: underline;
line-height: 22px;
}
.close {
position: absolute;
right: 4px;
top: -1px;
color: red;
cursor: pointer
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function() {
//默认加载广告
show_pop();
});
function show_pop() {
//获取广告图层的高度
var winpop = $('#winpop');
var popH = winpop.height();
if(popH >= 400) {
return;
}
//使广告图层可见
$('#winpop').css('display','block');
//设置定时器，每20毫秒升高广告图层4px
timer = setInterval("changeH(4)", 20);
}
function hid_pop() {
var winpop = $('#winpop');
var popH = winpop.height();
if(popH <= 0) {
return;
}
//设置定时器，每20毫秒降低广告图层4px
timer = setInterval("changeH(-4)", 20);
}
function changeH(addH) {
var winpop = $('#winpop');
var popH = winpop.height();
if (popH <= 400 && addH > 0 || popH >= 4 && addH < 0) {
winpop.height(popH + addH);
} else {
clearInterval(timer);
$(winpop).css('display',addH > 0 ? 'block' : 'none');
}
}
</script>
</head>
<body>
<div id="silu">
<button onclick="show_pop()">显示广告</button>
</div>
<div id="winpop">
<div class="title">
您有新的消息<span class="close" onclick="hid_pop()">X</span>
</div>
<div class="con">
<a href='http://lxzqz.iteye.com/' target="_blank">lxzqz的博客</a>
</div>
</div>
</body>
</html>
分享到：
相关推荐
总的来说，"纯js漂亮各种弹出框"涵盖了从基础的JavaScript弹出框到高级的自定义对话框的设计和实现。通过熟练掌握这些技巧，开发者可以创建出既美观又实用的交互式网页元素，提高网站的用户体验。
本篇文章将深入探讨`popup`弹出框的实现方式、设计原则以及JavaScript在创建弹出框中的作用。 一、JavaScript与Popup弹出框 JavaScript（JS）是网页开发中的重要脚本语言，它可以动态地改变网页内容和行为，包括...
压缩包中的"JQuery右下角弹出框"可能包含HTML文件、CSS文件和JavaScript文件，它们共同协作实现了弹出框的显示和交互功能。HTML文件定义了弹出框的结构，CSS文件负责样式设计，而JavaScript文件则处理用户的交互逻辑...
本压缩包中的资源涵盖了几个常见的JavaScript技术，包括导航菜单、图片切换、手风琴效果、弹出框以及切换标签，这些都是网页动态效果实现的核心组件。 首先，让我们详细探讨一下每个知识点： 1. **导航菜单**：...
2. **高性能**：优化的JavaScript引擎保证了弹出框的快速响应，即使在处理大量数据时也能保持流畅。 3. **可定制化**：支持自定义样式和主题，可以通过CSS轻松调整弹出框的外观和布局。 4. **插件支持**：内置的插件...
下面我们将深入探讨右下角弹出框的相关知识点，包括它的设计原则、实现方式、应用场景以及最佳实践。 1. **设计原则**： - **非侵入性**：右下角弹出框通常出现在屏幕的角落，这样既能吸引用户的注意力，又不会...
弹出层（弹窗）就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。 在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。 此外，还...
在"JS特效-其它广告"这个标签下，我们可以推测这个错误警告弹出框代码可能适用于广告展示或其他需要用户互动的场景，比如确认购买、提交表单或者显示加载进度等。使用这个代码，开发者可以轻松地在网页中实现丰富的...
这个弹出框可以用于显示通知、提示信息、广告或其他用户需要关注的内容。通过调整样式和添加更多交互，你可以根据项目需求进一步定制这个功能。记得在实际应用中，要确保浏览器兼容性和用户体验，避免频繁或不必要的...
1. **jQuery选择器**：jQuery 提供了丰富的选择器来选取页面中的元素，如 `id` 选择器（`#id`）、类选择器（`.class`）等，用于定位到需要添加弹出框的元素或触发弹出的元素。 2. **事件绑定**：使用 `on()` 方法...
**JavaScript实现广告弹出窗口：** 1. **创建窗口**：JavaScript的`window.open()`方法可以用来打开新的浏览器窗口。例如： ```javascript var newWindow = window.open('ad_url', '广告窗口', 'width=400,height...
你可以创建一个`div`元素作为弹出框的基本结构，例如： ```html 关闭 <!-- 这里放置广告或提示内容 --> ``` 其中，`id="popup"`用于后续JavaScript操作，`id="close"`是关闭按钮。 2. **CSS样式**： ...
在网页设计中，弹出层、模态框和对话框是不可或缺的元素，它们用于向用户展示重要信息、获取用户输入或执行特定操作。在这个名为"Ply-master"的项目中，我们可以推测它提供了一个优雅的JavaScript实现，用于创建这些...
标题提到的"js弹出对话框源代码下载"，是指使用JavaScript实现的一种常见网页交互功能——弹出对话框。对话框通常用于向用户显示警告、确认信息或获取用户输入。在网页中，我们常见的对话框有alert()、prompt()和...
下面将详细介绍如何使用JavaScript实现这样的功能。 首先，我们需要理解页面结构。一个基本的提示框通常包含一个标题（如果有的话）、内容区域和可能的关闭按钮。我们可以创建一个HTML元素，如`<div>`，来作为提示...
通过使用JavaScript，开发者可以轻松地实现自定义的弹出效果。 #### 1.2 技术要点 - **CSS样式设置**：定义弹框的基本样式，如位置、大小、边框等。 - **JavaScript逻辑控制**：通过JavaScript编写逻辑来控制弹框的...
本项目"仿苏宁易购每天首页出现广告弹出层"正是针对这一需求，利用Jquery库创建的一个完整的特效实现。Jquery是JavaScript的一个强大库，它简化了DOM操作、事件处理和动画制作，使得开发者能更高效地构建动态网页。 ...
7. **交互优化**：为了不影响用户正常浏览，可以添加防止滚动的功能，当广告弹出时阻止页面滚动，广告关闭后恢复。 通过以上步骤，我们可以构建一个具有Lightbox效果的网页内弹出广告。不过，需要注意的是，过多...
弹出窗口在网页设计中广泛应用于消息提示、登录框、模态对话框和广告展示等场景。 首先，让我们了解CSS3的变换（transfrom）属性。这个属性允许元素在二维或三维空间内进行旋转、缩放、移动或倾斜。在弹出窗口的...
标题“JS弹出一个超酷的小窗口”明确指出本篇将探讨如何利用JavaScript（简称JS）来创建一个具有视觉吸引力的弹出窗口。在现代网页设计中，弹出窗口常用于展示额外信息、广告或用户交互提示等场景，而使用JS可以使...