limit_area_cirle

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 *{margin: 0px;}
 .div1{
 border-radius: 60px;
 width:100px; 
 height: 100px;
 position: absolute;
 background: burlywood;
 top:10px;
 line-height: 100px; 
 text-align: center;
 font-size: 50px;
 }
  #warp{
   width: 700px; 
   height: 700px;
   background: chocolate;
  }
 </style>
 </head>
 <body>
 <div id="warp">
 <div class="div1">1</div>
         <div class="div1">2</div> 
         <div class="div1">3</div>
         <div class="div1">4</div>
         <div class="div1">5</div>
         <div class="div1">6</div> 
         <div class="div1">7</div>
         <div class="div1">8</div>
         <div class="div1">9</div> 
         <div class="div1">10</div>
         <div class="div1">11</div>
         <div class="div1">12</div> 
 </div>
 </body>
</html>
<script>window.onload = function() {
 var div1 = document.getElementsByClassName("div1")
 //获取随机方向
 start_position = function() {
 var arr = [];
 var x = Math.floor(Math.random() * 600);
 var y = Math.floor(Math.random() * 600);
 arr[0] = x;
 arr[1] = y;
 return arr;
 }
 //获取随机方向
 start_direction = function() {
 var arr = [];
 var x = Math.floor(Math.random() * 600);
 var y = Math.floor(Math.random() * 600);
 var i, m;
 if (x > 300) {
 i = 1;
 } else if (x <= 300) {
 i = -1
 }
 if (y > 300) {
 m = 1;
 } else if (y <= 300) {
 m = -1
 }
 arr[0] = i;
 arr[1] = m;
 return arr;
 }
 var run = function(obj, iX, iY, directX, directY) {
 var iX = start_position()[0]
 var iY = start_position()[1]
 var directX = start_direction()[0];
 var directY = start_direction()[1];
 setInterval(function() {
 iX = iX + directX;
 iY = iY + directY;
 obj.style.top = iY + "px";
 obj.style.left = iX + "px";
 if ((iX > 0 && iX < 600) && (iY < 0)) {
 directY = 1
 }
 if ((iX > 0 && iX < 600) && (iY > 600)) {
 directY = -1
 }
 if ((iY > 0 && iY < 600) && (iX > 600)) {
 directX = -1
 }
 if ((iY > 0 && iY < 600) && (iX < 0)) {
 directX = 1
 }
 var oneX = div1[0].offsetLeft + 50;
 var oneY = div1[0].offsetTop + 50;
 var twoX = div1[1].offsetLeft + 50;
 var twoY = div1[1].offsetTop + 50;
 var S = Math.floor(Math.sqrt(Math.pow((oneX - twoX), 2) + Math.pow((oneY - twoY), 2)));
 }, 10)
 }
 run(div1[0]);
 run(div1[1]);
 run(div1[2]);
 run(div1[3]);
 run(div1[4]);
 run(div1[5]);
// run(div1[6]);
// run(div1[7]);
// run(div1[8]);
// run(div1[9]);
// run(div1[10]);
// run(div1[11]);
}</script>

本文分享自微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-11-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Airbnb设计经理:一个好的交互设计师应该具备什么素质?

    以用户为先的体验设计,是一个不断发现问题、分析问题、解决问题的循环过程。如果把体验设计师比作一个将用户需求转化为产品构想的「魔术盒」,那么输入端吸收抽象的用户痛...

    前朝楚水
  • JavaScript 常用方法总结

    经常使用的 JS 方法,今天记下,以便以后查询 /* 手机类型判断 */ var BrowserInfo = { userAgent: navigator.us...

    前朝楚水
  • 5个要点教你改造作品集,提高求职成功率!

    设计师的纠结 为什么拟物设计、手机主题类设计作品比较多。两个原因: 1. 有发挥空间,容易做出好看的设计。 2. 能设计较为复杂的东西,展示设计师的设计功底。 ...

    前朝楚水
  • python脚本 通过rsa priva

    参考paramiko和pycrypto官方文档写了一个通过rsa private key生成 public key的工具,如下

    py3study
  • 程序员式贪吃蛇,URL贪吃蛇和源码贪吃蛇你值得一玩

    版权声明:本文为博主原创文章,未经博主允许不得转载。 ...

    业余草
  • 深入剖析Mean Shift聚类算法原理

    Mean Shift在计算机视觉领域的应用非常广,如图像分割,聚类和视频跟踪,小编曾经用Mean Shift实现目标跟踪,效果还不错。本文详细的总结了Mean ...

    小草AI
  • 超前进位加法器

    ? ? module adder_demo( a,b,cin,co,so ); input [3:0]a; input [3:0]b; inpu...

    瓜大三哥
  • 超前进位加法器

    module adder_demo( a,b,cin,co,so ); input [3:0]a; input [3:0]b; input ci...

    瓜大三哥
  • UI篇-UICollectionView 补充

    http://blog.csdn.net/xiyouios/article/details/50191101

    進无尽
  • js动态创建div等元素实例

    业余草

扫码关注云+社区

领取腾讯云代金券