姜PangPang 2021-01-13 16:17 采纳率: 0%
浏览 8
已结题

在网页中实现长按按钮,多张图片分别向下移动着出现,但是时间上需要图片不规律出现

想请教下各位大佬,在网页中实现长按按钮,多张图片分别向下移动着出现,但是时间上需要图片不规律出现,想要源代码,谢谢~

 

  • 写回答

3条回答 默认 最新

  • 王大师王文峰 企业官方账号 2021-01-15 13:57
    关注

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
    <title>长按</title>  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />  
    <meta name="apple-touch-fullscreen" content="yes">  
    <meta name="apple-mobile-web-app-capable" content="yes" />  
    <link href="css/travelstyle.css" rel="stylesheet" type="text/css" />  
      
    </head>  
    <body id="body_id" >  
    <div style="width:100%;">  
    <div style="width:100%; height:100px; background-color:#CCC;" ontouchstart="gtouchstart()" ontouchmove="gtouchmove()" ontouchend="gtouchend()">长按我</div>   
    </div>  
    <script>  
    var timeOutEvent=0;//定时器   
    //开始按   
    function gtouchstart(){   
        timeOutEvent = setTimeout("longPress()",500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适   
        return false;   
    };   
    //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件   
    function gtouchend(){   
        clearTimeout(timeOutEvent);//清除定时器   
        if(timeOutEvent!=0){   
            //这里写要执行的内容(尤如onclick事件)   
            alert("你这是点击,不是长按");   
        }   
        return false;   
    };   
    //如果手指有移动,则取消所有事件,此时说明用户只是要移动而不是长按   
    function gtouchmove(){   
        clearTimeout(timeOutEvent);//清除定时器   
        timeOutEvent = 0;   
          
    };   
       
    //真正长按后应该执行的内容   
    function longPress(){   
        timeOutEvent = 0;   
        //执行长按要执行的内容,如弹出菜单   
        alert("长按事件触发发");   
    }   
      
    </script>  
    </body>  
    </html>

    评论

报告相同问题?

悬赏问题

  • ¥15 关于#java#的问题,请各位专家解答!
  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表,拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果?
  • ¥30 求解达问题(有红包)
  • ¥15 请解包一个pak文件