zoukankan      html  css  js  c++  java
  • 浮动广告 碰撞小实例

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     2 "http://www.w3.org/TR/html4/strict.dtd">
     3 
     4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
     5     <head>
     6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     7         <title>10.浮动广告</title>
     8         <meta name="author" content="Administrator" />
     9         <!-- Date: 2014-12-15 -->
    10         <style>
    11             *{margin:0;padding:0}
    12             #div1{width:100px;height:100px;position:absolute;background:red;left:0;top:0}
    13             #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;}
    14         </style>
    15         <script>
    16             window.onload=function(){
    17                 var oDiv1=document.getElementById('div1');
    18                 var timer=null;
    19                 var iSpeedX=10;
    20                 var iSpeedY=10;
    21                 timer=setInterval(function(){
    22                     var L=oDiv1.offsetLeft + iSpeedX;
    23                     var T=oDiv1.offsetTop + iSpeedY;
    24                     oDiv1.style.left = L +'px';
    25                     oDiv1.style.top = T +'px';
    26                     
    27                     if( T > document.documentElement.clientHeight - oDiv1.offsetHeight ){
    28                         T = document.documentElement.clientHeight - oDiv1.offsetHeight;
    29                         iSpeedY *= -1;
    30                     }else if( T<0 ){
    31                         T=0;
    32                         iSpeedY *= -1;
    33                     }
    34                     
    35                     if( L > document.documentElement.clientWidth - oDiv1.offsetWidth ){
    36                         L = document.documentElement.clientWidth - oDiv1.offsetWidth;
    37                         iSpeedX *= -1;
    38                     }else if( L<0 ){
    39                         L=0;
    40                         iSpeedX *= -1;
    41                     }
    42                     
    43                     
    44                 },30)
    45             }
    46         </script>
    47     </head>
    48     <body>
    49         <div id="div1"></div>
    50     </body>
    51 </html>
  • 相关阅读:
    课后作业一
    软工假期预习作业
    Spark2.0自定义累加器
    JAVA hashmap知识整理
    Spark 累加器
    RDD与DataFrame的转换
    Scala笔记整理
    Spark RDD
    Hbase的flush机制
    Spring源码-ImportSelector实现分析
  • 原文地址:https://www.cnblogs.com/webskill/p/4164107.html
Copyright © 2011-2022 走看看