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

更新时间：2012年12月25日 17:20:18 作者：

Js实现运动的图片特效，两个网站Logo快速运动类似显示器屏保。借此练习运动元素对象sportBox的使用方法，需要了解的朋友可以参考下

初始化(元素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="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png" alt="" title="" /></div> <div id="box2"><img src="https://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> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

常见JS效果之图片减速度滚动实现代码
图片减速度滚动,一般用于产品的展示效果。作为前端，互联网上一些常见效果都要尝试去实现，不能因为公司用不到就不做。
2011-12-12
图片展示效果鼠标经过变大图，支持FF
图片展示效果，鼠标经过变大图，支持FF 类似FLASH一样漂亮
2009-08-08
一个简单的javascript图片放大效果代码
javascript图片放大效果多用于小图片产品的展示。
2010-08-08
网页特效从下往上过渡共享图库_最新图片
非常不错的应用，图片的轮换效果，用于一些图片的现实。
2009-04-04
弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。
弹出自适应图片大小的窗口弹出窗口根据图片大小，自动判断高和宽。...
2006-12-12
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox
jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox...
2007-03-03
JavaScript国旗变换效果代码
根据用户选择国家名词，显示对于的国家国旗
2008-08-08
一段非常简单的让图片自动切换js代码
一段非常简单的让图片自动切换js代码...
2006-11-11
JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
这是一个网上比较常用的JS网页图片查看器，可控制图片放大、缩小、还原、移动位置、拖动等操作，并且兼容IE浏览器和FF火狐浏览器，可以用在图片网站、地图网站等
2008-11-11
照片各部分的彩色与黑白交替更换
照片各部分的彩色与黑白交替更换...
2007-02-02