Initialization (element ID, the direction in which the element is moved is shown on the left, top, right, left, bottom, and right with 123456789 respectively).
Impact position, 9 digits representing 9 locations, in order the upper left corner, upper and lower right corner, left, middle, right, lower left, lower, lower right corner, 5 center.
<! DOCTYPE html> <pead> <meta http-equiv= "Content-type" content=; Charset=utf-8 "/> <title> movement logo</title> <style type=" Text/css "> <!--html,body{height:100%} --> </style> <script type= "Text/javascript" >/***************************************************** * Name: Moving element Object Sportbox * DATA--2012-12-20--Art ********************************************************* * * var sportbox = function () {} Sportbox.prototype = {//initialization (element ID, the direction of element movement in 123456789 to the left, top, right, left, middle, right, left, bottom, right) Init:function (ID, direction) {var obj = This._getid (id), dir = Direction | | 9;///1-9 for nine orientations, 5 for center stop Obj.style.posit Ion = "Absolute"; Obj.timer = null; This._sportdirection (obj, dir); var _this = this; Obj.onmouseover = function () {clearinterval (Obj.timer); }; Obj.onmouseout = function () {_this._sportdirection (obj); }; }, _getid:function (ID) {return typeof id = = "string"? document.getElementById (Id): ID; },//Impact boundary (return new motion direction) _hitborder:function (obj, direction) {var d = Direction | | 9,b = OBJ,DB = Document.body | | docume Nt.documentelement, H = 5, hitsite = 5; Impact position, 9 digits representing 9 locations respectively, in order the upper left corner, upper and upper right, left, middle, right, lower left, lower, lower right corner, 5 center if (b.offsetleft <= 0) {hitsite = 4; (b.offsettop <= 0) && (hitsite = 1); (B.offsettop + b.offsetheight >= db.clientheight) && (hitsite = 7); else if (B.offsetleft > 0 && b.offsetleft+b.offsetwidth < db.clientwidth) {hitsite = 2; (B.offsettop + b.offsetheight >= db.clientheight) && (Hitsite = 8)} else if (B.offsetleft +b.offsetwidth > = db.clientwidth) {hitsite = 6; (b.offsettop <= 0) && (hitsite = 3); (B.offsettop + b.offsetheight >= db.clientheight) && (hitsite = 9); Switch (hitsite) {case 1:b.style.left = 0+ ' px '; B.style.top = 0+ ' px '; (d ==1) && (h = 9); (d ==2) && (h = 8); (d ==8) && (h = 2); Break Case 2:b.style.top = 0+ ' px '; (D ==3) && (h = 9); (d ==2) && (h = 8); (d ==1) && (h = 7); Break Case 3:b.style.left = db.clientwidth-b.offsetwidth+ ' px '; B.style.top = 0+ ' px '; (d ==3) && (h = 9); (d ==2) && (h = 8); (d ==8) && (h = 2); Break Case 4:b.style.left = 0+ ' px '; (d ==7) && (h = 9); (d ==4) && (h = 6); (d ==1) && (h = 3); Break Case 5://h = 5; Break Case 6:b.style.left = db.clientwidth-b.offsetwidth+ ' px '; (d ==9) && (h = 7); (d ==6) && (h = 4); (d ==3) && (h = 1); Break Case 7:b.style.left = 0+ ' px '; B.style.top = db.clientheight-b.offsetheight+ ' px '; (d ==7) && (h = 9); (d ==2) && (h = 8); (d ==8) && (h = 2); Break Case 8:b.style.top = db.clientheight-b.offsetheight+ ' px '; (d ==9) && (h = 3); (d ==7) && (h = 1); (d ==8) && (h = 2); Break Case 9:b.style.left = db.clientwidth-b.offsetwidth+ ' px '; B.style.top = Db.clientheight-b.offsetheight+ ' px '; (d ==8) && (h = 2); (d ==6) && (h = 4); (d ==9) && (h = 1); Break } this._sportdirection (b, h); },//Motion direction (motion direction) _sportdirection:function (obj, direction) {var db = Document.body | | document.documentelement, MX = 0, my = 0, _this = this, h = Direction | | (Math.Round (Math.random ())? 9:7); Switch (h) {Case 1:mx =-5; my =-5; Break Case 2:MX = 0; my =-5; Break Case 3:MX = 5; my =-5; Break Case 6:MX = 5; my = 0; Break Case 9:MX = 5; my = 5; Break Case 8:MX = 0; my = 5; Break Case 7:MX =-5; my = 5; Break Case 5:MX = 0; my = 0; Break Case 4:MX =-5; my = 0; Break Default://alert ("You entered the wrong direction, only allow 1-9,5 table to stop"); } Obj.timer = SetInterval (function () {if (Obj.offsetleft < 0 | | Obj.offsettop < 0 | | obj.offsetwidth+obj.offsetle FT > Db.clientwidth | | Obj.offsetheight+obj.offsettop > Db.clientheight) {clearinterval (Obj.timer); _this._hitborder (obj, h); } else{obj.style.left = obj.offsetleft + MX + ' px '; Obj.style.top = obj.offsettop + my + ' px '; }},10); } </script> </pead> <body> <div id= "box" ></div> <div id= "Box2" ></div> & Lt;script type= "Text/javascript" >/* Create an instance of the invocation * * var s = new Sportbox (); S.init (' box ', 4); The parameter represents the element ID and direction (the direction is not implied to the right) s.init (' Box2 '); </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
