如何让JS,Script的ID延迟3秒后再执行相应动作？

最新推荐文章于 2024-05-29 15:14:06 发布
最新推荐文章于 2024-05-29 15:14:06 发布
阅读量1.8k 收藏
点赞数
文章标签： border function div c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hksdn/article/details/7743053
版权

怎么让下面的ID：capslide_img_ cont1，capslide_img_ cont2，延迟3秒后再执行？下面的JS代码，希望有热心网友回答。。。因为急用。。。 
 
 
这是一个鼠标放上去的效果，因为鼠标一路过，就会有闪动，所以想让它延迟，这样就不会太花哨了。。。
附上链接了： http://www.mpvvip.com/dins/le.html  
就是像让鼠标路过时，不要谎动，放鼠标放上3秒后，才往上滑。。。

前提是保持好原有的效果，能实现吗？

 

javascript模拟sleep
使用方法比较简单。

JS注释部份是修改后的新加参数：

 

<!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=UTF-8">
<title>Home</title>
<link href="le_files/style.css" type="text/css" rel="stylesheet">
 </head>
<body>
<div class="demo">
    <div style="width: 210px; height: 170px; border: 0px none;" id="capslide_img_cont1" class="ic_container">
        <img src="le_files/baidu_sylogo1.gif" height="170" width="210" border="0">
        <div class="overlay" style="background-color: rgb(236, 236, 236); display: none;"></div>
        <div style="color: black; background-color: rgb(236, 236, 236); bottom: 0px; width: 210px;" class="ic_caption">
            <p class="ic_category">&nbsp;</p>
            <h3>服务员的快乐</h3>
            <p style="display: none;" class="ic_text">使用本系统服务员所得到的方便<br><img src="le_files/aan.gif" border="0">
            </p>
        </div>
    </div>
</div>

 

<div class="demo">
    <div style="width: 210px; height: 170px; border: 0px none;" id="capslide_img_cont2" class="ic_container">
        <img src="le_files/2_hksdn.gif" height="170" width="210" border="0">
        <div class="overlay" style="background-color: rgb(236, 236, 236); display: block; opacity: 0.969096;"></div>
        <div style="color: black; background-color: rgb(236, 236, 236); bottom: 0px; width: 210px;" class="ic_caption">
            <p class="ic_category">&nbsp;</p>
            <h3>服务员的快乐</h3>
            <p style="display: block; overflow: hidden; height: 34.525px; margin-top: 0px; margin-bottom: 0px; padding-top: 4.45108px; padding-bottom: 4.45108px;" class="ic_text">使用本系统服务员所得到的方便<br><img src="le_files/aan.gif" border="0">
            </p>
        </div>
    </div>
</div>
 


<script type="text/javascript" src="le_files/jquery-1.js"></script>
<script type="text/javascript">
function Pause(obj,iMinSecond){    
   if (window.eventList==null) window.eventList=new Array();    
   var ind=-1;    
   for (var i=0;i<window.eventList.length;i++){    
       if (window.eventList[i]==null) {    
         window.eventList[i]=obj;    
         iind=i;    
         break;    
        }    
    }    
   if (ind==-1){    
   ind=window.eventList.length;    
   window.eventList[ind]=obj;    
   }    
  setTimeout("GoOn(" + ind + ")",iMinSecond);    
}    
   
//js继续函数   
function GoOn(ind){    
  var obj=window.eventList[ind];    
  window.eventList[ind]=null;    
  if (obj.NextStep) obj.NextStep();    
  else obj();    
}

(function($) {
    $.fn.capslide = function(options) {
        var opts = $.extend({}, $.fn.capslide.defaults, options);
        return this.each(function() {
            $this = $(this);
            var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
           
            if(!o.showcaption)    $this.find('.ic_caption').css('display','none');
            else $this.find('.ic_text').css('display','none');
               
            var _img = $this.find('img:first');
            var w = _img.css('width');
            var h = _img.css('height');
            $('.ic_caption',$this).css({'color':o.caption_color,'background-color':o.caption_bgcolor,'bottom':'0px','width':w});
            $('.overlay',$this).css('background-color',o.overlay_bgcolor);
            $this.css({'width':w , 'height':h, 'border':o.border});
            $this.hover(
                function () {
                    Pause(this,3000);//停留3秒后执行NextStep的function
                    this.NextStep=function(){
                        if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                        $('.overlay',$(this)).show();
                        else
                        $('.overlay',$(this)).fadeIn();
                        if(!o.showcaption)
                            $(this).find('.ic_caption').slideDown(500);
                        else
                            $('.ic_text',$(this)).slideDown(500);
                    }
                },
                function () {
                    Pause(this,1000);//停留3秒后执行NextStep的function
                    this.NextStep=function(){
                        if((navigator.appVersion).indexOf('MSIE 7.0') > 0)
                        $('.overlay',$(this)).hide();
                        else
                        $('.overlay',$(this)).fadeOut();
                        if(!o.showcaption)
                            $(this).find('.ic_caption').slideUp(200);
                        else
                            $('.ic_text',$(this)).slideUp(200);
                    }                   
                }
            );
        });
    };
    $.fn.capslide.defaults = {
        caption_color    : 'black',
        caption_bgcolor    : '#ECECEC',
        overlay_bgcolor : '#ECECEC',
        border            : '0',
        showcaption        : true
    };
})(jQuery);

 

 

$(function () {
    $("#capslide_img_cont1").capslide({
        caption_color    : 'black',
        caption_bgcolor    : '#ECECEC',
        overlay_bgcolor : '#ECECEC',
        border            : '0',
        showcaption        : true
    });
    $("#capslide_img_cont2").capslide({
        caption_color    : 'black',
        caption_bgcolor    : '#ECECEC',
        overlay_bgcolor : '#ECECEC',
        border            : '0',
        showcaption        : true
    });
});
           
</script>
</body></html>

 

勇而归
关注
JavaScript实现延时3秒刷新
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 938
JavaScript实现延时3秒刷新
JavaScript中让方法延迟指定时间后再执行，以一定时间为间隔循环执行
热门推荐
一个很酷的人
08-02 1万+
一、JavaScript中让方法延迟指定时间后再执行 //延迟三秒后弹出“延迟3秒执行！” var timeout = setTimeout(function () { alert("延迟3秒执行！") },3000) //清除延迟 clearTimeout(timeout); 二、以3秒为时间间隔循环执行 //每隔3秒执行一次
js定时器3秒刷新
qq_34631220的博客
08-25 1229
var t1 = window.setTimeout(function () { history.go(0); }, 3000);
JS【详解】setTimeout 延时（含清除 setTimeout，计时开始时间，0 秒延时解析，多 setTimeout 执行顺序，setTimeout 应用场景，网红面试题）
最新发布
朝阳39的博客
05-29 9622
setTimeout 是一个 js 内置的函数，用于延时执行代码。
js延时调用和定时调用
dengfengling999的博客
01-31 786
知识点： 延时调用：一个函数不马上执行，而是隔一段时间在执行，而且只会执行一次 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 详细代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
js 3秒后跳转页面的实现代码
10-26
标题提到的"js 3秒后跳转页面"就是这样的一个需求，它在网页加载完成后等待三秒钟，然后自动将用户导航到指定的新页面。这里我们有两种不同的实现方式来达到这个效果。 方法一： 这种方法通过设置`setTimeout`函数...
HTML页面3秒后自动跳转的三种常见方法
09-28
`setTimeout`函数可以在指定的毫秒数后执行一个函数或一段代码。为了实现3秒后的跳转，我们可以创建一个函数并设置定时器。以下是具体示例： ```html <script type="text/javascript"> window.onload = function()...
JS实现n秒后自动跳转的两种方法
10-22
不过，如果时间未到，我们不再使用`setInterval`，而是再次调用`setTimeout`来延迟1秒后再执行`ChangeTime`。这样，每次`setTimeout`结束时，都会检查是否需要继续计时。 ```html <script> $(function () { ...
基于JavaScript实现一定时间后去执行一个函数
11-25
JavaScript中的`setTimeout()`函数是一个非常重要的工具，它允许开发者安排代码在特定的延迟后执行，这对于创建动态效果、异步处理、以及定时任务等场景非常有用。下面将详细讲解`setTimeout()`函数的使用方法和相关...
JavaScript延迟重复执行函数lLoopRun.js详解与示例
"javascript延时重复执行函数lLoopRun.js是一个JavaScript函数，用于实现定时、重复执行指定的函数或语句，并提供了停止条件。由http://fengyan.iecn.cn编写，函数接受三个参数：sFuncLoop（需要重复执行的函数或...
JavaScript中延迟指定时间
Web GIS前端研究
06-26 901
function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) ret
浅谈JavaScript的执行机制
fcc627的博客
06-24 133
浅谈JavaScript的执行机制首先我们先来了解一下关于js的以下两点1、JS是单线程语言 2、JS的Event Loop （线性循环）是JS的执行机制。(1) JS为什么是单线程的？JS最初被设计用在浏览器中，那么想象一下，如果浏览器中的JS是多线程的。场景描述：那么现在有2个进程，process process1，由于是多进程的JS，所以他们对同一个dom，同时进行操作。 process 删除了该dom，而process1 编辑了该dom，同时下达2个矛盾的命令，浏览器究竟该如何执行呢？ 这样想，JS
script的延迟执行
weixin_30371875的博客
06-23 253
看这段代码： <body> <script src="deffer.js"></script> content </body> deffer.js的内容为： alert(1) 这样在alert窗口没有被关闭之前，页面都会是一片空白。因为alert窗口阻止了页面的继续渲染。 为了避免此类问题，htm...
java script 延时_javascript 延时执行函数
weixin_35936191的博客
03-09 662
延时执行函数，貌似有些多此一举,也许还是有点用记在这儿var test = {delay : function(lifetime){var data;setTimeout(function(){for (name in test.methods) {eval("data = test.methods."+ name +"();");}}, lifetime);return this;},met...
js如何控制鼠标放在div上3秒后才执行函数
jjhy5247的专栏
12-03 2587
<br />当鼠标放在某个div上3秒不移出，则弹出一个提示框，把div里的内容提示出来，<br />如果鼠标划过一个div或在div上停留的时间没有3秒则不弹出对话框提示。<br />知道的大家互相学习下，要详细点，请不要只说简单的几个字，<br />jq有事件延迟的。主要靠clearTimeout,setTimeout实现<br />用两个函数控制鼠标移到和移出DIV的事件，移到时用setTimeout延时3秒执行你要执行的函数，如果提早移出就把延时取消<br />鼠标移出时，要判断，目标控件是否当前控
几种延迟加载JS代码的方法加快网页的访问速度
10-26
这样，浏览器在初始加载网页时不会立即执行JS代码，而是等待一定时间后再加载，为其他资源的加载提供了优先级，提高了网页的整体加载速度。 示例代码： ```html <script type="text/javascript" src="" id="my">...
在JavaScript应用中实现延迟加载的方法
12-02
JavaScript延迟加载是一种优化Web应用程序性能的技术，特别是在大型项目中，它可以显著减少页面加载时间和网络带宽的消耗。本文将深入探讨如何使用RequireJS框架来实现JavaScript的延迟加载，并通过一个具体的示例...
图片停留三秒&点击关闭后消失javaScript案例
GuessHat的博客
07-17 1400
图片停留三秒&点击关闭后消失javaScript案例 使用图片地址：https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3934837541,1515601765&fm=26&gp=0.jpg <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &
JavaScript实现延时提示框
sysy1314的博客
04-27 477
延时提示框就类似于qq上面，将鼠标移到头像时，会出来一个提示框，鼠标移出时，提示框过会儿会消失。代码如下：&lt;html&gt; &lt;head&gt; &lt;title&gt;延时提示框&lt;/title&gt; &lt;style&gt; #div1{ float:left; width:100px...
Javascript中script标签多线程与延迟运行属性
pink_pantise的博客
12-14 549
外部脚本与内部脚本 内部脚本： <html> <head> <title>test</title> <script>//head中添加script表示在页面dom加载之前加载script中代码，直至script内容全部加载好才会加载页面 function button_click(){ alert("成功！");//如果在<script>标签中 添加<"\"(转义字符)/script> } </script&g
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值