运动的logo图片，运动元素对象sportBox实例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png" alt="" title="" /></div>
<div id="box2"><img src="/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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

运动的logo图片，运动元素对象sportBox实例

分类

网站常用

描述

Js实现运动的图片特效，两个网站Logo快速运动。练习运动的元素对象sportBox的使用方法。 <br>　　初始化(元素id, 元素移动的方向用123456789分别表示左上、上、右上、左、中、右、左下、下、右下。 <br>　　撞击位置，9个数字分别表示9个...