<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{margin:0;padding:0;}
#topFill{display:none;text-align:center;position:absolute;z-index = 999;filter:alpha(opacity=50);background-color:#eee;opacity: 0.5;-moz-opacity: 0.5;width:100%;}
#alertBox{margin:auto;height:150px;width:300px;background-color:#cf0;text-align:left;border:1px solid #666}
#alertTitle{height:20px;background-color:#EDF8B8;line-height:20px;padding:0 10px;border-bottom:1px solid #71860D}
#alertContent{padding:42px 0;;text-align:center;}
#alertBtn{text-align:center;}
#alertBtn input{margin:0 10px;background:#FFFF99;border:1px solid #fff;height:20px;line-height:20px;}
</style>
<script type="text/javascript" >
//document.documentElement.clientHeight+'px'
// onload的时候声明对象
var obj = new Object;
function oload(){
obj = document.getElementById('topFill');
obj.style.display = 'none';
}
function cl(){
document.body.style.overflow = 'hidden';
document.body.style.height = document.documentElement.clientHeight + 'px';
obj.style.display = 'block';
obj.style.height = document.documentElement.clientHeight + 'px';
}
function bcl(){
document.body.style.overflow = '';
obj.style.display = 'none';
}
function oresize(){
if(obj.style.display != 'block'){
}else{
cl();
}
}
function isno(str){
if (str == 'yes'){
window.close();
}else {
bcl();
}
}
</script>
</head>
<body onload="oload()" onresize="oresize()">
<div id="topFill">
<div id="alertBox">
<div id="alertTitle">警告!</div>
<div id="alertContent">你确定要退出吗?</div>
<div id="alertBtn"><input type="button" value="是(Y)" onclick="isno('yes')" /><input type="button" value="否(N)" onclick="isno('no')" /></div>
</div>
</div>
<input type="button" value="点我" onclick="cl()"/>
</body>
</html>
分享到：
相关推荐
此外，为了增强用户体验，遮罩效果还可以结合动画效果，如渐显渐隐、滑动等，这些可以通过CSS3的`transition`和`animation`属性实现。也可以使用JavaScript库，如jQuery或React等，来简化DOM操作和动画处理。 总结...
`fadeToggle` 方法负责渐显渐隐效果，`setTimeout` 用于设定遮罩自动关闭的时间。 请注意，为了实现局部遮罩，你需要在 HTML 中添加一个具有特定 ID 的元素，例如 `id="local-element"`，然后根据实际需求调用 `...
【JavaScript仿Flash遮罩动画效果】是通过JavaScript技术来实现的一种动态效果，它模拟了早期Flash中的遮罩功能，使得网页元素可以展现出类似电影胶片滚动或者渐显渐隐的视觉效果。在本文实例中，我们将探讨如何使用...
jQuery库为开发者提供了丰富的工具来实现这些效果，其中之一就是鼠标悬停时的文字渐隐渐现动画效果。这个“jQuery鼠标悬停文字渐隐渐现动画效果”就是一个很好的实例，它能够提升网站的视觉吸引力，使用户在浏览时...
// 渐隐效果 $('.bg').click(function(){ $('.bg').fadeOut(800); $('.content').fadeOut(800); }); ``` 对于早期IE浏览器的兼容性问题，可以通过JavaScript获取页面的高度和宽度，动态设置遮罩层的大小。另外，...
这段代码中，`.fadeIn()`和`.fadeOut()`方法分别用于渐显和渐隐遮罩层，而`.addClass('hover')`和`.removeClass('hover')`用于切换图片的放大状态。你可以在CSS中为`.hover`类定义特定的样式。 最后，HTML5的`...
// 使用 fadeOut 动画渐隐 } // 示例：当点击某个按钮时显示遮罩 $('#someButton').click(function() { showMask(); // 在这里执行其他操作，如加载内容或显示弹窗 }); // 示例：当操作完成时隐藏遮罩 ...
1. **渐显渐隐**：通过设置CSS3的透明度动画，可以实现遮罩层的平滑过渡。这可以通过jQuery的`.fadeIn()`和`.fadeOut()`方法实现，配合定时器调整速度，营造出优雅的展开和关闭效果。 2. **滑动展开**：遮罩层可以...
例如，一款名为`jQuery.dialogBox`的插件，只需几行代码即可创建具有遮罩效果的弹出框，并支持自定义标题、内容、按钮等元素。 实现这些效果的具体步骤如下： 1. **HTML结构** 创建一个包含弹出框内容的元素，并...
在这里，`$(this)`指的是触发事件的元素，`.find('.overlay')`则用于查找子元素中的遮罩层，`fadeIn()`和`fadeOut()`则是jQuery的动画方法，用于渐显和渐隐元素。 然而，"jQuery鼠标悬停半透明遮罩效果"更进一步，...
在实际应用中，可能还会涉及到响应式设计，确保在不同设备和屏幕尺寸上都能良好地展示图片和遮罩效果。这可能需要使用媒体查询(`@media`)来适应不同的视口宽度。 综上所述，“jquery-图片展示-鼠标滑过图片文字遮罩...
6. **渐隐渐显效果**：结合CSS的`opacity`属性和JavaScript的`setTimeout`或`setInterval`，可以让文本链接逐渐变得不可见，然后再次显现。 7. **树型菜单**：模仿QQ的好友/黑名单菜单，常使用递归函数和事件处理来...
- **渐隐效果**：通过`opacity`属性，我们可以让当前图片逐渐变透明，同时下一图片逐渐显现，形成平滑过渡。 - **淡入淡出效果**：这种效果是通过同时改变两张图片的`opacity`，一张逐渐消失，另一张逐渐出现，...
如果是基于jQuery，可能使用 `.fadeOut()` 或 `.hide()` 方法来实现遮罩层的渐隐效果，以增加视觉吸引力。 4. **HTML 结构**：`loading3.html` 文件可能是包含遮罩层和加载指示器的一个示例页面。在这个文件中，...
在本项目中，“jQuery九宫格遮罩显示文字效果.zip”是一个包含JavaScript特效的资源...通过这个九宫格文字遮罩效果，你可以将类似的逻辑应用于其他类型的交互元素，如按钮、卡片等，以提升网站或应用的互动性和吸引力。
// 遮罩层渐隐 } ); ``` 这里的`find(".img-mask")`用于找到图片上的遮罩层，`stop()`用于停止当前进行的动画，避免因快速移动鼠标而造成的效果混乱，`fadeTo()`则负责改变透明度。 在实际应用中，遮罩层上可能...
当需要显示遮罩层时，通过jQuery的`.fadeIn()`方法使其渐显，而`.fadeOut()`方法则可以用来使其渐隐。遮罩层通常设置一定的透明度，以达到半透明的效果，从而不影响用户对页面其它部分的视觉感知。 ### jQuery实现...
在动画中，我们可以改变遮罩的透明度，从而实现元素的渐显渐隐效果。 3. **CSS3动画**： 结合`@keyframes`规则，我们可以创建自定义的动画效果。例如，改变遮罩的`opacity`或`mask-position`，可以实现从左至右或...
1. 渐隐效果：通过CSS3的`transition`属性实现，设定元素的透明度在一定时间内平滑变化。例如： ```css .image-container { opacity: 0; transition: opacity 0.5s ease-in-out; } .show-image { opacity: 1; }...
// 渐隐后移除遮罩 }); }); ``` 在这个示例中，我们使用了jQuery的`$(document).ready()`来确保在DOM加载完成后再执行脚本。`fadeTo()`方法用于淡入淡出效果，第二个参数是目标透明度，第三个参数是一个回调...