Home > Article > Web Front-end > js实现运动logo图片效果及运动元素对象sportBox使用方法_图象特效

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

WBOYOriginal: 2016-05-16 17:45:361414browse

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

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

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> 
 
 
<div id="box"><img src="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png" alt="" title=""></div> 
<div id="box2"><img src="http://www.jb51.net/images/logo.gif" alt="" title=""></div> 
<script type="text/javascript"> 
/* 创建一个调用的实例 */ 
var s = new sportBox(); 
s.init('box', 4); //参数表示元素id和方向(方向缺默向右下) 
s.init('box2'); 
</script>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js点击弹出div层实现可拖曳的弹窗效果_布局与层Next article：JS模拟抽奖序效果实现代码_游戏娱乐

See more

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

Related articles