js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:06:16

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效:初始化(元素id, 元素移動(dòng)的方向用123456789分別表示左上、上、右上、左、中、右、左下、下、右下。撞擊位置，9個(gè)數(shù)字分別表示9個(gè)地點(diǎn)，按順序左上角、上、右上角、左、中、右、左下角、下、右下角，5居中。運(yùn)動(dòng)的logo /************

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效:初始化(元素id, 元素移動(dòng)的方向用123456789分別表示左上、上、右上、左、中、右、左下、下、右下。撞擊位置，9個(gè)數(shù)字分別表示9個(gè)地點(diǎn)，按順序左上角、上、右上角、左、中、右、左下角、下、右下角，5居中。運(yùn)動(dòng)的logo /************

初始化(元素id, 元素移動(dòng)的方向用123456789分別表示左上、上、右上、左、中、右、左下、下、右下。

撞擊位置，9個(gè)數(shù)字分別表示9個(gè)地點(diǎn)，按順序左上角、上、右上角、左、中、右、左下角、下、右下角，5居中。
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>運(yùn)動(dòng)的logo</title> <style type="text/css"> </style> <script type="text/javascript"> /**************************************************************** * name：運(yùn)動(dòng)的元素對(duì)象sportBox * DATA --2012-12-20-- 美工 ***************************************************************** */ var sportBox = function() {} sportBox.prototype = { //初始化(元素id, 元素移動(dòng)的方向用123456789分別表示左上、上、右上、左、中、右、左下、下、右下) init: function(id, direction) { var obj = this._getId(id), dir = direction || 9; //用1-9代表九個(gè)方向，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; }, //撞擊的邊界(返回新的運(yùn)動(dòng)方向) _hitBorder: function(obj, direction) { var d = direction || 9,b = obj,db = document.body || document.documentElement, h = 5, hitsite = 5; //撞擊位置，9個(gè)數(shù)字分別表示9個(gè)地點(diǎn)，按順序左上角、上、右上角、左、中、右、左下角、下、右下角，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); }, //運(yùn)動(dòng)方向(運(yùn)動(dòng)方向) _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("你輸入的方向不對(duì)，只允許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> <img src="http://img03.taobaocdn.com/tps/i3/T1ogqgXfXeXXXXXXXX-168-42.png" alt="" title="" /> <img src="http://www.gxlcms.com/images/logo.gif" alt="" title="" /> <script type="text/javascript"> /* 創(chuàng)建一個(gè)調(diào)用的實(shí)例 */ var s = new sportBox(); s.init('box', 4); //參數(shù)表示元素id和方向(方向缺默向右下) s.init('box2'); </ script> </body> </html>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：圖片運(yùn)動(dòng) 使用方法

熱門(mén)焦點(diǎn)

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對(duì)象sportBox使用方法_圖象特效

最新推薦

猜你喜歡

熱門(mén)推薦