查看效果:http://www.neixun360.com/eg/eg2/demo.htm
需要完善:如何保证ie6下,弹出窗口垂直居中,且拖动滚动条时,弹出窗口不抖动???
<!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 content="div,间隔弹窗" name="description">
<meta content="div,间隔弹窗" name="keywords">
<title>div,间隔弹窗</title>
<style>
#LRdiv1{width:480px;height:310px;overflow:hidden;position:fixed;*position:absolute;left:370px;top:220px;*top: expression(eval(document.documentElement.scrollTop+220));color:#000000;font-size:12px;margin:0;padding:0;}
</style>
</head>
<script type="text/javascript" src="http://www.leyikao.com/templets/default/js/jquery.min.js"></script>
<body>
<p>打开网页2s后,第一次弹窗;关闭弹窗后,间隔3s弹窗。两个时间都是可以修改的。</p>
<p style="color:#f00;">求助:如何保证ie6下,弹出窗口垂直居中,且拖动滚动条时,弹出窗口不抖动???</p>
<div style="display: none;" id="LRdiv1">
<img border="0" usemap="#MapLR" src="http://www.leyikao.com/templets/default/Images/t.png" width=480 height=310>
<map name="MapLR" id="MapLR">
<area shape="rect" coords="78,219,231,258" href="javascript:void(0)" onclick="divclose();" />
<area shape="rect" coords="242,219,398,258" href="javascript:void(0)" onclick="zxdiv();" />
</map>
</div>
<script type="text/javascript">
//获取窗口的高度
var windowHeight;
//获取窗口的宽度
var windowWidth;
//获取弹窗的宽度
var popWidth;
//获取弹窗高度
var popHeight;
function init(){
windowHeight=$(window).height();
windowWidth=$(window).width();
popHeight=$("#LRdiv1").height();
popWidth=$("#LRdiv1").width();
}
$(function(){
init();
var popY=(windowHeight-popHeight)/2;
var popX=(windowWidth-popWidth)/2;
$("#LRdiv1").css("left",popX);
$("#LRdiv1").delay(2000).show(500);
});
function divclose(){
$("#LRdiv1").hide();
$("#LRdiv1").delay(3000).show(500);
}
function zxdiv(){
window.open("http://chat10.live800.com/live800/chatClient/chatbox.jsp?jid=1340831441&companyID=195572&configID=174342&skillId=10417&enterurl=http%3A%2F%2Fwww.leyikao.com%2F&tm=1341541098354");
}
</script>
</body>
</html>
<div style="display:none;">
<script src="http://s21.cnzz.com/stat.php?id=4445316&web_id=4445316" language="JavaScript"></script>
</div>
查看效果:http://www.neixun360.com/eg/eg2/demo.htm
分享到:
相关推荐
`fadeIn`和`fadeOut`用于平滑地显示和隐藏弹窗,`setTimeout`则控制了显示和隐藏的时间间隔。 在实际应用中,你可能需要根据具体需求调整弹窗的样式、动画效果以及消息的来源。例如,消息可能来自服务器的Ajax请求...
10. **轮询提示**: 在特定时间间隔重复显示弹窗,例如倒计时或定时提醒。 11. **拖放对话框**: 可以通过鼠标拖动调整位置的弹窗。 12. **可自定义大小的弹窗**: 用户可以手动调整弹窗的宽度和高度。 13. **全屏弹窗*...
弹窗的触发可能是由用户的特定操作,如点击按钮、滚动页面或者时间间隔等。JavaScript 的事件监听器(如`addEventListener`)可以捕获这些事件并执行相应的弹窗展示代码。 6. **异步处理** 在某些情况下,弹窗...
通过指定CSS属性(如宽度、高度、透明度等)和时间间隔,可以实现平滑的过渡效果。例如,我们可以让遮罩层从无到有、逐渐显现,或者以淡入淡出的方式出现和消失。 在手机端应用这些效果时,需要注意响应式设计,...
通过设定特定的时间间隔,提示层可以在用户进入页面后的一段时间内自动出现,增加了用户体验的流畅性。 描述中提到,这个提示层还具有“可最小化”的特性。这意味着用户不仅可以阅读提示信息,还可以选择将其最小化...
jQuery计时器插件利用JavaScript的setInterval和clearInterval函数,可按照预设的时间间隔执行函数。开发者可以根据需求定制计时器的行为,如递增计数、执行特定操作等。 四、jQuery报警插件 报警插件用于在特定...
3. **滑动显示**:jQuery的滑动效果(如`.slideUp()`, `.slideDown()`, `.slideToggle()`)常用于隐藏和显示广告内容,比如弹窗广告或侧边栏广告,增加视觉吸引力。 4. **淡入淡出和过渡**:使用`.fadeIn()`, `....
1. 图片轮播:通过改变图片的显示顺序或使用CSS3的`transition`属性,可以实现图片的自动轮播,结合定时器(`setInterval()`)控制轮播间隔。 2. 滑动广告:利用`animate()`方法,可以实现广告内容的水平或垂直滑动...
定时器可以定期触发切换操作,使内容按设定的时间间隔自动更换。同时,结合`scrollTop()`或`scrollLeft()`方法,可以检测用户的滚动行为,实现内容的智能切换,比如当用户滚动到页面特定位置时启动或停止切换。 在...
6. **停止闪烁**:当选定中奖项后,停止所有元素的闪烁动画,仅保留中奖项的高亮状态,同时可以添加其他视觉反馈,如弹窗提示或音效。 在实际应用中,还可以根据需求进行优化,例如添加缓动函数以改变动画的速度...
另外,使用setTimeout函数来设置弹窗关闭后跳转的时间间隔。 在Thinkphp5框架中,可以通过定义控制器方法来使用这些弹窗函数。文章中给出的两个使用实例,test方法返回了alert_error和alert_success函数的调用结果...
10. **兼容性**:JQuery致力于跨浏览器兼容性,使得开发者无需担心不同浏览器之间的差异,从而节省大量调试时间。然而,随着现代浏览器的进步,开发者也需要考虑性能优化和减少对JQuery的依赖,特别是在移动端。 ...
整个实现进度条效果的代码就是一个典型的使用jQuery来操作DOM,以及运用JavaScript进行时间间隔控制的实例。它涵盖了以下几个重要的知识点: 1. jQuery库的引入及其版本选择对项目的重要性。 2. HTML元素作为进度条...
"jQuery弹性标签滑块"是一种常见的网页交互效果,主要用于展示多组内容标签,用户可以通过滑动来切换不同的标签页。这种效果在网站导航、产品展示等领域广泛应用,为用户提供了一种直观且易于操作的界面交互方式。...
代码中设置了一个定时器,只有在特定时间间隔后(例如100毫秒)才会执行实际的处理函数: ```javascript var _that = this, _timer = null; window.onresize = function() { clearTimeout(_timer); _timer = ...
2. **集成其他插件**:SwiperSlider可以与其他jQuery插件结合,比如添加Zoom效果、Lightbox弹窗等,增强功能。 3. **动态加载**:若内容过多,可以实现动态加载,只在需要时加载幻灯片内容,提高页面加载速度。 4....
7. **用户体验优化**:为了提升用户体验,代码可能会有防骚扰设置,如设定一定时间内的消息发送间隔,或者提供关闭悬浮窗口的选项。同时,加载速度的优化也是关键,可能通过压缩代码、减少HTTP请求等方式实现。 ...
JavaScript可以设置定时器(setTimeout或setInterval),按照设定的时间间隔自动切换大图。同时,还需要提供手动切换的选项,例如左右箭头或导航点。用户点击这些元素时,JavaScript会改变当前显示的图片索引,从而...
不过,为了提供更流畅的用户体验,可能需要优化轮询间隔,或者考虑采用WebSocket等更实时的通信协议。此外,提醒的具体展示方式(如弹窗、图标提示等)也需要根据实际需求进行设计和实现。在实际开发中,还应注意...
设置一个时间间隔,如3秒,然后调用切换图片的函数。 3. **导航点**:为每个幻灯片添加对应的导航点,点击时切换到相应幻灯片。使用`.on('click', function() {...})`监听点击事件,并根据点击的导航点更新当前幻灯...