js实现运动logo图片效果及运动元素对象sportBox使用方法

2019-11-20 23:07:13

字体：大中小

来源：转载

供稿：网友

初始化(元素id, 元素移动的方向用123456789分别表示左上、上、右上、左、中、右、左下、下、右下。

撞击位置，9个数字分别表示9个地点，按顺序左上角、上、右上角、左、中、右、左下角、下、右下角，5居中。

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>运动的logo</title> <style type="text/css">  </style> <script type="text/javascript"> /**************************************************************** * name：运动的元素对象sportBox * DATA --2012-12-20-- 美工 ***************************************************************** */ var sportBox = function() {} sportBox.prototype = { //初始化(元素id, 元素移动的方向用123456789分别表示左上、上、右上、左、中、右、左下、下、右下) init: function(id, direction) { var obj = this._getId(id), dir = direction || 9; //用1-9代表九个方向，5表示居中停止 obj.style.position = "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; }, //撞击的边界(返回新的运动方向) _hitBorder: function(obj, direction) { var d = direction || 9,b = obj,db = document.body || document.documentElement, h = 5, hitsite = 5; //撞击位置，9个数字分别表示9个地点，按顺序左上角、上、右上角、左、中、右、左下角、下、右下角，5居中 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); }, //运动方向(运动方向) _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("你输入的方向不对，只允许1-9，5表停止"); } obj.timer = setInterval(function() { if (obj.offsetLeft < 0 || obj.offsetTop < 0 || obj.offsetWidth+obj.offsetLeft > 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> </head> <body> <div id="box"><img src="/d/file/p/2019/11-21/521f1ad83294127f8afca7565a985f8f.png" alt="" title="" /></div> <div id="box2"><img src="https://www.jb51.net//www.VeVB.COm/images/logo.gif" alt="" title="" /></div> <script type="text/javascript"> /* 创建一个调用的实例 */ var s = new sportBox(); s.init('box', 4); //参数表示元素id和方向(方向缺默向右下) s.init('box2'); </script> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：JS实现简洁(隔行换色、高亮显示)表格特效

下一篇：基于jQuery实现下拉收缩(展开与折叠)特效