`
jjklmm
  • 浏览: 57273 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery不同间隔时间弹窗

阅读更多

查看效果: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

0
5
分享到:
评论
1 楼 jjklmm 2012-08-30  
期待完善:如何保证ie6下,弹出窗口垂直居中,且拖动滚动条时,弹出窗口不抖动???

相关推荐

    jQuery右下角自动弹窗提示代码

    `fadeIn`和`fadeOut`用于平滑地显示和隐藏弹窗,`setTimeout`则控制了显示和隐藏的时间间隔。 在实际应用中,你可能需要根据具体需求调整弹窗的样式、动画效果以及消息的来源。例如,消息可能来自服务器的Ajax请求...

    19种弹窗方式-JavaScript

    10. **轮询提示**: 在特定时间间隔重复显示弹窗,例如倒计时或定时提醒。 11. **拖放对话框**: 可以通过鼠标拖动调整位置的弹窗。 12. **可自定义大小的弹窗**: 用户可以手动调整弹窗的宽度和高度。 13. **全屏弹窗*...

    超级弹窗代码

    弹窗的触发可能是由用户的特定操作,如点击按钮、滚动页面或者时间间隔等。JavaScript 的事件监听器(如`addEventListener`)可以捕获这些事件并执行相应的弹窗展示代码。 6. **异步处理** 在某些情况下,弹窗...

    jQuery手机端遮罩动画效果弹出层

    通过指定CSS属性(如宽度、高度、透明度等)和时间间隔,可以实现平滑的过渡效果。例如,我们可以让遮罩层从无到有、逐渐显现,或者以淡入淡出的方式出现和消失。 在手机端应用这些效果时,需要注意响应式设计,...

    jquery底部定时滑出提示层.zip

    通过设定特定的时间间隔,提示层可以在用户进入页面后的一段时间内自动出现,增加了用户体验的流畅性。 描述中提到,这个提示层还具有“可最小化”的特性。这意味着用户不仅可以阅读提示信息,还可以选择将其最小化...

    jQuery秒表、闹钟、计时器和报警插件

    jQuery计时器插件利用JavaScript的setInterval和clearInterval函数,可按照预设的时间间隔执行函数。开发者可以根据需求定制计时器的行为,如递增计数、执行特定操作等。 四、jQuery报警插件 报警插件用于在特定...

    jQuery流行广告效果

    3. **滑动显示**:jQuery的滑动效果(如`.slideUp()`, `.slideDown()`, `.slideToggle()`)常用于隐藏和显示广告内容,比如弹窗广告或侧边栏广告,增加视觉吸引力。 4. **淡入淡出和过渡**:使用`.fadeIn()`, `....

    JQuery广告特效3.7z

    1. 图片轮播:通过改变图片的显示顺序或使用CSS3的`transition`属性,可以实现图片的自动轮播,结合定时器(`setInterval()`)控制轮播间隔。 2. 滑动广告:利用`animate()`方法,可以实现广告内容的水平或垂直滑动...

    jquery叠加效果自动滚动切换特效.zip

    定时器可以定期触发切换操作,使内容按设定的时间间隔自动更换。同时,结合`scrollTop()`或`scrollLeft()`方法,可以检测用户的滚动行为,实现内容的智能切换,比如当用户滚动到页面特定位置时启动或停止切换。 在...

    jquery闪烁摇奖特效.zip

    6. **停止闪烁**:当选定中奖项后,停止所有元素的闪烁动画,仅保留中奖项的高亮状态,同时可以添加其他视觉反馈,如弹窗提示或音效。 在实际应用中,还可以根据需求进行优化,例如添加缓动函数以改变动画的速度...

    Thinkphp5结合layer弹窗定制操作结果页面

    另外,使用setTimeout函数来设置弹窗关闭后跳转的时间间隔。 在Thinkphp5框架中,可以通过定义控制器方法来使用这些弹窗函数。文章中给出的两个使用实例,test方法返回了alert_error和alert_success函数的调用结果...

    JQuery一些特效

    10. **兼容性**:JQuery致力于跨浏览器兼容性,使得开发者无需担心不同浏览器之间的差异,从而节省大量调试时间。然而,随着现代浏览器的进步,开发者也需要考虑性能优化和减少对JQuery的依赖,特别是在移动端。 ...

    jQuery实现进度条效果代码

    整个实现进度条效果的代码就是一个典型的使用jQuery来操作DOM,以及运用JavaScript进行时间间隔控制的实例。它涵盖了以下几个重要的知识点: 1. jQuery库的引入及其版本选择对项目的重要性。 2. HTML元素作为进度条...

    jquery弹性标签滑块.zip

    "jQuery弹性标签滑块"是一种常见的网页交互效果,主要用于展示多组内容标签,用户可以通过滑动来切换不同的标签页。这种效果在网站导航、产品展示等领域广泛应用,为用户提供了一种直观且易于操作的界面交互方式。...

    原生javascript实现图片弹窗交互效果

    代码中设置了一个定时器,只有在特定时间间隔后(例如100毫秒)才会执行实际的处理函数: ```javascript var _that = this, _timer = null; window.onresize = function() { clearTimeout(_timer); _timer = ...

    支持移动端和桌面设备的轻量级jQuery幻灯片插件

    2. **集成其他插件**:SwiperSlider可以与其他jQuery插件结合,比如添加Zoom效果、Lightbox弹窗等,增强功能。 3. **动态加载**:若内容过多,可以实现动态加载,只在需要时加载幻灯片内容,提高页面加载速度。 4....

    非常漂亮实用的QQ在线客服悬浮代码

    7. **用户体验优化**:为了提升用户体验,代码可能会有防骚扰设置,如设定一定时间内的消息发送间隔,或者提供关闭悬浮窗口的选项。同时,加载速度的优化也是关键,可能通过压缩代码、减少HTTP请求等方式实现。 ...

    js全屏弹窗大图幻灯片特效

    JavaScript可以设置定时器(setTimeout或setInterval),按照设定的时间间隔自动切换大图。同时,还需要提供手动切换的选项,例如左右箭头或导航点。用户点击这些元素时,JavaScript会改变当前显示的图片索引,从而...

    jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码

    不过,为了提供更流畅的用户体验,可能需要优化轮询间隔,或者考虑采用WebSocket等更实时的通信协议。此外,提醒的具体展示方式(如弹窗、图标提示等)也需要根据实际需求进行设计和实现。在实际开发中,还应注意...

    jq实现的轮播图和购物网站小特效

    设置一个时间间隔,如3秒,然后调用切换图片的函数。 3. **导航点**:为每个幻灯片添加对应的导航点,点击时切换到相应幻灯片。使用`.on('click', function() {...})`监听点击事件,并根据点击的导航点更新当前幻灯...

Global site tag (gtag.js) - Google Analytics