zoukankan      html  css  js  c++  java
  • js的setInterval事件

     1 <body>
     2    <div id="content"  style="position:relative; height:1000px; 1000px; background-color:#666;">
     3     <div id="one" style="position:absolute;top:0px; left:0px; height:100px; 100px; background-color:red;"></div>
     4     </div>
     5         <script>
     6           var one=document.getElementById('one')
     7           var x=0;
     8           var y=0;
     9           var xs=10;
    10           var ys=10;
    11           function scroll(){
    12               x+=xs;
    13               y+=ys;
    14               if(x>=document.getElementById('content').offsetWidth-one.offsetWidth-20 || x<=0)
    15               {
    16                   xs=-1*xs;
    17                   
    18               }
    19             if(y>=document.getElementById('content').offsetHeight-one.offsetHeight-20 || y<=0)
    20               {
    21                   
    22                   ys=-1*ys;
    23               }
    24               one.style.left=x;
    25               one.style.top=y;
    26 
    27           }
    28           dt=setInterval(scroll,100);
    29           one.onmouseover=function(){
    30           clearInterval(dt);    
    31           };
    32           one.onmouseout=function(){
    33           dt=setInterval(scroll,100);
    34           };
    35         </script>
    36 </body>
    if you don't try,you will never know!
  • 相关阅读:
    Angular2 表单
    PHP Windows环境部署
    CI 扩展 Service
    Angular2 组件生命周期
    linux 命令笔记
    CI 笔记一
    Angular2 管道
    Angular2 指令
    springboot整合Quartz实现动态配置定时任务
    vue-app开发入门
  • 原文地址:https://www.cnblogs.com/leeten/p/3457496.html
Copyright © 2011-2022 走看看