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

最新推荐文章于 2022-01-14 16:11:48 发布
最新推荐文章于 2022-01-14 16:11:48 发布
阅读量1.7k 收藏
点赞数
文章标签： 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>

 

勇而归
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
YouShallPass:延迟的密码屏蔽Javascript库
04-30
你应该通过 延迟的密码屏蔽Javascript库 自定义遮罩图案和延迟时间 支持IE9 + 用法 将其包含在您的页面中 < script src =" YouShallPass.js " > </ script > 最初的 // instantiate ysp with 2 params: (pattern[String], delay[number]) let ysp = new YouShallPass ( "●" , 800 ) ; // if you are using IE9,call this function to fix a minor bug ysp . fixIE9 ( ) ; // bind your password input element such as <input type="text" id="passwd"/> document . querySe
JS基础_while循环
兴趣是最好的老师
04-02 286
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 向页面中输出连续的数字，太麻烦，用循环改进 */ ...
js while 延迟
c1052981766的专栏
08-29 3357
1.setTimeout，不能实现延迟处理 如果这样写： var count = 10; var domElem=a(10); while(!domElem){ console.log(count); setTimeout(function(){ a(10+count); },5000); count--; if(count == 0){ break; } } 则
【JavaScript】实现延时3秒刷新
Jessieeeeeee的博客
01-14 2809
代码 setTimeout(function (){ window.location.reload(); }, 3000);
JavaScript中让方法延迟指定时间后再执行，以一定时间为间隔循环执行
一个很酷的人
08-02 1万+
一、JavaScript中让方法延迟指定时间后再执行 //延迟三秒后弹出“延迟3秒执行！” var timeout = setTimeout(function () { alert("延迟3秒执行！") },3000) //清除延迟 clearTimeout(timeout); 二、以3秒为时间间隔循环执行 //每隔3秒执行一次
js定时器3秒刷新
qq_34631220的博客
08-25 1100
var t1 = window.setTimeout(function () { history.go(0); }, 3000);
js如何控制鼠标放在div上3秒后才执行函数
jjhy5247的专栏
12-03 2538
<br />当鼠标放在某个div上3秒不移出，则弹出一个提示框，把div里的内容提示出来，<br />如果鼠标划过一个div或在div上停留的时间没有3秒则不弹出对话框提示。<br />知道的大家互相学习下，要详细点，请不要只说简单的几个字，<br />jq有事件延迟的。主要靠clearTimeout,setTimeout实现<br />用两个函数控制鼠标移到和移出DIV的事件，移到时用setTimeout延时3秒执行你要执行的函数，如果提早移出就把延时取消<br />鼠标移出时，要判断，目标控件是否当前控
基于Vue的延迟加载插件vue-view-lazy
12-29
目的：图片或者其他资源进入可视区域后加载 安装使用 直接下载dist目录下的vue-view-lazy.min.js使用 使用npm安装 直接使用 <div id=app> <span model=handleModel></span> [removed][removed] [removed]...
javascript setTimeout()传递函数参数(包括传递对象参数)
12-07
”main”> <div id=”showpane” class=”showpane”> </div> ”textarea”> <form method=”post” action=”” name=”sform”> <textarea name=”txtara”></textarea> <div> <input type=...
JS代码放在head和body中的区别分析
12-10
先看一个例子： 一个二级级联动态下拉列表框，一级分类（即大类别）id=”vSort0″. 代码如下: <head> function changelocation(id) {…………} </head> <body><select class=”input1″ id=”...
javascript 定时器工作原理分析
11-26
在指定的延迟时间之后调用一个函数或执行一个代码片段。 语法 setTimeout 的语法非常简单，第一个参数为回调函数，第二个参数为延时的时间。函数返回一个数值类型的ID唯一标示符，此ID可以用作 clearTimeout 的参数...
JS实现延时3秒刷新
热门推荐
csdnluolei
11-01 13万+
setTimeout(function (){ window.location.reload(); }, 3000);
js如何让方法在延迟两秒后执行
u012992462的专栏
09-26 3万+
var int=self.setInterval(function(){         location.reload();         },2000) //这里2000代表两秒
JS中如何让某个动作延迟几秒执行(☆)
独狼的博客
05-30 7294
setTimeout(function (){ $(button).linkbutton('enable'); }, 3000);
js延时执行方法
kerryqpw的博客
05-17 1万+
js延时执行方法
jquery 等待3秒钟执行函数
mrdu_somefun的博客
12-15 6万+
setTimeout(function(){$("#div2").hide()}, 3000);
js延迟2秒执行事件
weixin_30485291的博客
05-24 5万+
有时候，我们在做修改回显数据时，就需要默认触发一些事件，但是由于数据没有很快从服务器中取回，所以就有延迟执行js事件 setTimeout(function () { // 这里就是处理的事件 }, 2000); 转载于:https://www.cnblogs.com/xiaostudy/p/10918955.html...
前端js、jquery 休眠功能的实现、定时器、3秒钟后执行和每隔三秒钟执行一次
小良的博客
03-29 1万+
系列文章目录 文章目录系列文章目录前言具体写法比如 3秒钟后提示警告框，只执行一次每隔三秒钟提示警告框，反复执行jquery的方式自己在项目中遇到的实例 前言 前端线程休眠、定时器等要实现这些我们功能可能会经常用到， 写这篇文章的目的是为了1方便自己以及大家查询到怎么使用 具体写法 比如 3秒钟后提示警告框，只执行一次 setTimeout(function(){ alert("ok"); },3000); 把你要执行的语句放在函数体中 每隔三秒钟提示警告框，反复执行 setInterval(functi
h5使一段文字延迟5秒后逐渐显示出来 代码
最新发布
07-16
要实现文字延迟5秒后逐渐显示出来的效果，你可以使用CSS的过渡效果和JavaScript的定时器。以下是一个示例代码： ```html <!DOCTYPE html> 延迟显示文字 #textElement { opacity: 0; transition: opacity 1s...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值