百般無聊的情況下寫的，效果的思路來源於豬豬給的一個地址http://www.scmylike.com/wishingtree/index.html?ran=1293530304018，這是他們的一個項目，有興趣的話可以去玩玩，寫的過程中遇到一些問題，感謝果果的指正，以及檬爸桑幫我找出因為少寫一個字母帶來的讓人蛋疼困繞。
JS:
function danteng(){this.init.apply(this,arguments)};danteng.prototype = {init:function(opts){var set = {outer:'test',width:800,height:400,oClass:'haha',len:20}opts = opts || {};var opt = this.extend(set,opts);var box = document.getElementById(opt.outer);this.maxZIndex = opt.len;for(var i=0,len=opt.len;i<len;i++){var oDiv = document.createElement('div');var index = this.getRandomZindex(opt.len);oDiv.className = opt.oClass;box.appendChild(oDiv);oDiv.style.zIndex = index;oDiv.innerHTML = i;var width = oDiv.offsetWidth,height = oDiv.offsetHeight;var pos = this.getRandomPos(opt.width-width,opt.height-height);this.skyAnimate(oDiv,{'top':pos.y,'left':pos.x},'slow',function(){});this.drag(oDiv,opt.width,opt.height)}},extend:function(baseObj,extendObj){for(var i in extendObj) baseObj[i] = extendObj[i];return baseObj;},getRandomZindex:function(zIndex){return Math.round(Math.random()*zIndex);},getRandomPos:function(left,top){return {x:Math.round(Math.random()*left),y:Math.round(Math.random()*top)};},getPos:function(e){e = e || window.event;if(e.pageX || e.pageY) return {x:e.pageX,y:e.pageY};return {x:e.clientX + document.documentElement.scrollLeft - document.body.clientLeft,y:e.clientY + document.documentElement.scrollTop - document.body.clientTop};},addEvent:function(el,type,fn){if(el.addEventListener != undefined){el.addEventListener(type,fn,false);}else if(el.attachEvent != undefined){el.attachEvent('on'+type,fn)}else{el['on'+type] = fn;}},removeEvent:function(el,type,fn){if(el.removeEventListener != undefined){el.removeEventListener(type,fn,false);}else if(el.detachEvent != undefined){el.detachEvent('on'+type,fn);}else{el['on'+type] = function(){};}},drag:function(el,range_width,range_height){this.addEvent(el,'mousedown',this.down(el,range_width,range_height));el.ondragstart = function(){return false;};},down:function(el,range_width,range_height){var _this = this;return function(e){var width = range_width - el.offsetWidth;var left = range_height - el.offsetHeight;var pos = _this.getPos(e);var l = parseInt(el.style.left);var t = parseInt(el.style.top);el.style.zIndex = ++_this.maxZIndex;_this.tmp_move = _this.move(el,l,t,width,left,pos);_this.tmp_up = _this.up(el);_this.addEvent(document,'mousemove',_this.tmp_move);_this.addEvent(document,'mouseup',_this.tmp_up);}},move:function(el,l,t,width,left,pos){var _this = this;return function(e){var newPos = _this.getPos(e);var oL = l + newPos.x - pos.x;var oT = t + newPos.y - pos.y;el.style.left = Math.max(0,Math.min(oL,width)) + 'px';el.style.top = Math.max(0,Math.min(oT,left)) + 'px';}},up:function(el){var _this = this;return function(){_this.removeEvent(document,'mousemove',_this.tmp_move);}},skyAnimate:function(obj, options, step, callback){if (!obj) return;var n = 0,timer = null,oStyle = [],de = [],c = [], b = 0;step = { 'slow': 100,'normal': 64, 'fast': 10 } [step] || 64;var d = function(x) {return Math.sqrt(1 - Math.pow((x - 1), 2))}for (var i in options) {var obj_style = parseInt(this.sky_css(obj, i));if (!obj_style) obj_style = 0;de.push(obj_style);c.push(options[i] - obj_style);oStyle.push(i);}timer = setInterval(function() {if (n >= step) {clearInterval(timer);if (callback && callback instanceof Function) callback();}b = d(n / step);for (var j = 0,len = de.length; j < len; j++) {obj.style[oStyle[j]] = de[j] + c[j] * b + 'px';}n++;},15);},sky_getType:function(o){ var t;return ((t = typeof(o)) == 'object' ? o == null && 'null' || (Object.prototype.toString.call(o)).slice(8, -1) : t).toLowerCase();},sky_css:function(o, name){if (this.sky_getType(name) == 'string') {if (o.style[name]) return o.style[name];if (o.currentStyle) return o.currentStyle[name];if (document.defaultView) return document.defaultView.getComputedStyle(o, "")[name];} else if (this.sky_getType(name) == 'object') {for (var i in name) {o.style[i] = name[i];}}}}new danteng();
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><style type="text/css">#test { width:800px; height:400px; border:1px solid #000; margin:100px auto; position:relative; background:#333;}.haha { background:#000; border:2px solid #fff; width:200px; height:100px; position:absolute;top:50%; left:50%; cursor:move; color:#fff; font-size:30px; line-height:100px; text-align:center;}</style></head><body><div id="test"></div><script type="text/javascript" src="danteng.js"></script></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
