├── -Demo--master └── 板块掉落 │ ├── 板块掉落.html │ └── 素材 │ ├── 001.jpg │ └── jquery.min.js ├── CSS3Learning-master ├── CSS3动画小设计 │ ├── CSS3动画.html │ ├── READEME.md │ ├── img │ │ └── timg.jpeg │ └── 开机动画(2D).html ├── README.md ├── 动态时钟 │ ├── READEME.md │ └── 动态时钟.html ├── 有趣的扇形导航栏 │ ├── READEME.md │ ├── click类型的 │ │ ├── img │ │ │ ├── close.png │ │ │ ├── heart.png │ │ │ ├── left.png │ │ │ ├── plus.png │ │ │ ├── reload.png │ │ │ └── setting.png │ │ └── 扇形导航.html │ └── hover类型的 │ │ ├── img │ │ ├── close.png │ │ ├── heart.png │ │ ├── left.png │ │ ├── plus.png │ │ ├── reload.png │ │ └── setting.png │ │ └── 扇形导航.html ├── 淘宝移动端导航 │ ├── REAEME.md │ ├── img │ │ ├── 1.png │ │ ├── 10.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ └── 9.png │ ├── 成品.html │ └── 残次品.html └── 立方体 │ ├── READEME.md │ ├── 三棱柱.html │ ├── 多棱柱.html │ ├── 立方体.html │ └── 立方体改进.html ├── Demo-master └── 2048 │ ├── 2048.css │ ├── 2048.html │ ├── jQuery.js │ ├── main2048.js │ ├── read me │ ├── showanimation.js │ └── support.js ├── FunnyCss-master ├── ParallaxScrolling01.html ├── ParallaxScrolling02.html ├── README.md └── typing.html ├── canvas-master ├── README.md ├── 倒计时炫酷时钟 │ ├── digit.js │ ├── index.html │ ├── index.js │ └── test.html └── 炫酷时钟 │ ├── README.md │ ├── clock.html │ ├── clock.js │ ├── digit.js │ └── test.html ├── css动画 └── code │ ├── style.css │ └── 飞机动画.html └── time.js /-Demo--master/板块掉落/板块掉落.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Document 10 | 51 | 52 | 59 | 60 | 61 | 62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 | 242 | 243 | 244 | 245 | 246 | 247 | 248 | 249 | 250 | 251 | 252 | 253 | 254 | 255 | 256 | 257 | 258 | 259 | 260 | 261 | 262 | 263 | 264 | 265 | 266 | 267 | 268 | 269 | 270 | 271 | 272 | 273 | 274 | 275 | 276 | 277 | 278 | 279 | 280 | 281 | 282 | 283 | 284 |
285 | 286 | 287 | -------------------------------------------------------------------------------- /-Demo--master/板块掉落/素材/001.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/-Demo--master/板块掉落/素材/001.jpg -------------------------------------------------------------------------------- /-Demo--master/板块掉落/素材/jquery.min.js: -------------------------------------------------------------------------------- 1 | /*! jQuery v1.7.2 jquery.com | jquery.org/license */ 2 | (function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cu(a){if(!cj[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ck||(ck=c.createElement("iframe"),ck.frameBorder=ck.width=ck.height=0),b.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write((f.support.boxModel?"":"")+""),cl.close();d=cl.createElement(a),cl.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ck)}cj[a]=e}return cj[a]}function ct(a,b){var c={};f.each(cp.concat.apply([],cp.slice(0,b)),function(){c[this]=a});return c}function cs(){cq=b}function cr(){setTimeout(cs,0);return cq=f.now()}function ci(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ch(){try{return new a.XMLHttpRequest}catch(b){}}function cb(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g0){if(c!=="border")for(;e=0===c})}function S(a){return!a||!a.parentNode||a.parentNode.nodeType===11}function K(){return!0}function J(){return!1}function n(a,b,c){var d=b+"defer",e=b+"queue",g=b+"mark",h=f._data(a,d);h&&(c==="queue"||!f._data(a,e))&&(c==="mark"||!f._data(a,g))&&setTimeout(function(){!f._data(a,e)&&!f._data(a,g)&&(f.removeData(a,d,!0),h.fire())},0)}function m(a){for(var b in a){if(b==="data"&&f.isEmptyObject(a[b]))continue;if(b!=="toJSON")return!1}return!0}function l(a,c,d){if(d===b&&a.nodeType===1){var e="data-"+c.replace(k,"-$1").toLowerCase();d=a.getAttribute(e);if(typeof d=="string"){try{d=d==="true"?!0:d==="false"?!1:d==="null"?null:f.isNumeric(d)?+d:j.test(d)?f.parseJSON(d):d}catch(g){}f.data(a,c,d)}else d=b}return d}function h(a){var b=g[a]={},c,d;a=a.split(/\s+/);for(c=0,d=a.length;c)[^>]*$|#([\w\-]*)$)/,j=/\S/,k=/^\s+/,l=/\s+$/,m=/^<(\w+)\s*\/?>(?:<\/\1>)?$/,n=/^[\],:{}\s]*$/,o=/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g,p=/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g,q=/(?:^|:|,)(?:\s*\[)+/g,r=/(webkit)[ \/]([\w.]+)/,s=/(opera)(?:.*version)?[ \/]([\w.]+)/,t=/(msie) ([\w.]+)/,u=/(mozilla)(?:.*? rv:([\w.]+))?/,v=/-([a-z]|[0-9])/ig,w=/^-ms-/,x=function(a,b){return(b+"").toUpperCase()},y=d.userAgent,z,A,B,C=Object.prototype.toString,D=Object.prototype.hasOwnProperty,E=Array.prototype.push,F=Array.prototype.slice,G=String.prototype.trim,H=Array.prototype.indexOf,I={};e.fn=e.prototype={constructor:e,init:function(a,d,f){var g,h,j,k;if(!a)return this;if(a.nodeType){this.context=this[0]=a,this.length=1;return this}if(a==="body"&&!d&&c.body){this.context=c,this[0]=c.body,this.selector=a,this.length=1;return this}if(typeof a=="string"){a.charAt(0)!=="<"||a.charAt(a.length-1)!==">"||a.length<3?g=i.exec(a):g=[null,a,null];if(g&&(g[1]||!d)){if(g[1]){d=d instanceof e?d[0]:d,k=d?d.ownerDocument||d:c,j=m.exec(a),j?e.isPlainObject(d)?(a=[c.createElement(j[1])],e.fn.attr.call(a,d,!0)):a=[k.createElement(j[1])]:(j=e.buildFragment([g[1]],[k]),a=(j.cacheable?e.clone(j.fragment):j.fragment).childNodes);return e.merge(this,a)}h=c.getElementById(g[2]);if(h&&h.parentNode){if(h.id!==g[2])return f.find(a);this.length=1,this[0]=h}this.context=c,this.selector=a;return this}return!d||d.jquery?(d||f).find(a):this.constructor(d).find(a)}if(e.isFunction(a))return f.ready(a);a.selector!==b&&(this.selector=a.selector,this.context=a.context);return e.makeArray(a,this)},selector:"",jquery:"1.7.2",length:0,size:function(){return this.length},toArray:function(){return F.call(this,0)},get:function(a){return a==null?this.toArray():a<0?this[this.length+a]:this[a]},pushStack:function(a,b,c){var d=this.constructor();e.isArray(a)?E.apply(d,a):e.merge(d,a),d.prevObject=this,d.context=this.context,b==="find"?d.selector=this.selector+(this.selector?" ":"")+c:b&&(d.selector=this.selector+"."+b+"("+c+")");return d},each:function(a,b){return e.each(this,a,b)},ready:function(a){e.bindReady(),A.add(a);return this},eq:function(a){a=+a;return a===-1?this.slice(a):this.slice(a,a+1)},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},slice:function(){return this.pushStack(F.apply(this,arguments),"slice",F.call(arguments).join(","))},map:function(a){return this.pushStack(e.map(this,function(b,c){return a.call(b,c,b)}))},end:function(){return this.prevObject||this.constructor(null)},push:E,sort:[].sort,splice:[].splice},e.fn.init.prototype=e.fn,e.extend=e.fn.extend=function(){var a,c,d,f,g,h,i=arguments[0]||{},j=1,k=arguments.length,l=!1;typeof i=="boolean"&&(l=i,i=arguments[1]||{},j=2),typeof i!="object"&&!e.isFunction(i)&&(i={}),k===j&&(i=this,--j);for(;j0)return;A.fireWith(c,[e]),e.fn.trigger&&e(c).trigger("ready").off("ready")}},bindReady:function(){if(!A){A=e.Callbacks("once memory");if(c.readyState==="complete")return setTimeout(e.ready,1);if(c.addEventListener)c.addEventListener("DOMContentLoaded",B,!1),a.addEventListener("load",e.ready,!1);else if(c.attachEvent){c.attachEvent("onreadystatechange",B),a.attachEvent("onload",e.ready);var b=!1;try{b=a.frameElement==null}catch(d){}c.documentElement.doScroll&&b&&J()}}},isFunction:function(a){return e.type(a)==="function"},isArray:Array.isArray||function(a){return e.type(a)==="array"},isWindow:function(a){return a!=null&&a==a.window},isNumeric:function(a){return!isNaN(parseFloat(a))&&isFinite(a)},type:function(a){return a==null?String(a):I[C.call(a)]||"object"},isPlainObject:function(a){if(!a||e.type(a)!=="object"||a.nodeType||e.isWindow(a))return!1;try{if(a.constructor&&!D.call(a,"constructor")&&!D.call(a.constructor.prototype,"isPrototypeOf"))return!1}catch(c){return!1}var d;for(d in a);return d===b||D.call(a,d)},isEmptyObject:function(a){for(var b in a)return!1;return!0},error:function(a){throw new Error(a)},parseJSON:function(b){if(typeof b!="string"||!b)return null;b=e.trim(b);if(a.JSON&&a.JSON.parse)return a.JSON.parse(b);if(n.test(b.replace(o,"@").replace(p,"]").replace(q,"")))return(new Function("return "+b))();e.error("Invalid JSON: "+b)},parseXML:function(c){if(typeof c!="string"||!c)return null;var d,f;try{a.DOMParser?(f=new DOMParser,d=f.parseFromString(c,"text/xml")):(d=new ActiveXObject("Microsoft.XMLDOM"),d.async="false",d.loadXML(c))}catch(g){d=b}(!d||!d.documentElement||d.getElementsByTagName("parsererror").length)&&e.error("Invalid XML: "+c);return d},noop:function(){},globalEval:function(b){b&&j.test(b)&&(a.execScript||function(b){a.eval.call(a,b)})(b)},camelCase:function(a){return a.replace(w,"ms-").replace(v,x)},nodeName:function(a,b){return a.nodeName&&a.nodeName.toUpperCase()===b.toUpperCase()},each:function(a,c,d){var f,g=0,h=a.length,i=h===b||e.isFunction(a);if(d){if(i){for(f in a)if(c.apply(a[f],d)===!1)break}else for(;g0&&a[0]&&a[j-1]||j===0||e.isArray(a));if(k)for(;i1?i.call(arguments,0):b,j.notifyWith(k,e)}}function l(a){return function(c){b[a]=arguments.length>1?i.call(arguments,0):c,--g||j.resolveWith(j,b)}}var b=i.call(arguments,0),c=0,d=b.length,e=Array(d),g=d,h=d,j=d<=1&&a&&f.isFunction(a.promise)?a:f.Deferred(),k=j.promise();if(d>1){for(;c
a",d=p.getElementsByTagName("*"),e=p.getElementsByTagName("a")[0];if(!d||!d.length||!e)return{};g=c.createElement("select"),h=g.appendChild(c.createElement("option")),i=p.getElementsByTagName("input")[0],b={leadingWhitespace:p.firstChild.nodeType===3,tbody:!p.getElementsByTagName("tbody").length,htmlSerialize:!!p.getElementsByTagName("link").length,style:/top/.test(e.getAttribute("style")),hrefNormalized:e.getAttribute("href")==="/a",opacity:/^0.55/.test(e.style.opacity),cssFloat:!!e.style.cssFloat,checkOn:i.value==="on",optSelected:h.selected,getSetAttribute:p.className!=="t",enctype:!!c.createElement("form").enctype,html5Clone:c.createElement("nav").cloneNode(!0).outerHTML!=="<:nav>",submitBubbles:!0,changeBubbles:!0,focusinBubbles:!1,deleteExpando:!0,noCloneEvent:!0,inlineBlockNeedsLayout:!1,shrinkWrapBlocks:!1,reliableMarginRight:!0,pixelMargin:!0},f.boxModel=b.boxModel=c.compatMode==="CSS1Compat",i.checked=!0,b.noCloneChecked=i.cloneNode(!0).checked,g.disabled=!0,b.optDisabled=!h.disabled;try{delete p.test}catch(r){b.deleteExpando=!1}!p.addEventListener&&p.attachEvent&&p.fireEvent&&(p.attachEvent("onclick",function(){b.noCloneEvent=!1}),p.cloneNode(!0).fireEvent("onclick")),i=c.createElement("input"),i.value="t",i.setAttribute("type","radio"),b.radioValue=i.value==="t",i.setAttribute("checked","checked"),i.setAttribute("name","t"),p.appendChild(i),j=c.createDocumentFragment(),j.appendChild(p.lastChild),b.checkClone=j.cloneNode(!0).cloneNode(!0).lastChild.checked,b.appendChecked=i.checked,j.removeChild(i),j.appendChild(p);if(p.attachEvent)for(n in{submit:1,change:1,focusin:1})m="on"+n,o=m in p,o||(p.setAttribute(m,"return;"),o=typeof p[m]=="function"),b[n+"Bubbles"]=o;j.removeChild(p),j=g=h=p=i=null,f(function(){var d,e,g,h,i,j,l,m,n,q,r,s,t,u=c.getElementsByTagName("body")[0];!u||(m=1,t="padding:0;margin:0;border:",r="position:absolute;top:0;left:0;width:1px;height:1px;",s=t+"0;visibility:hidden;",n="style='"+r+t+"5px solid #000;",q="
"+""+"
",d=c.createElement("div"),d.style.cssText=s+"width:0;height:0;position:static;top:0;margin-top:"+m+"px",u.insertBefore(d,u.firstChild),p=c.createElement("div"),d.appendChild(p),p.innerHTML="
t
",k=p.getElementsByTagName("td"),o=k[0].offsetHeight===0,k[0].style.display="",k[1].style.display="none",b.reliableHiddenOffsets=o&&k[0].offsetHeight===0,a.getComputedStyle&&(p.innerHTML="",l=c.createElement("div"),l.style.width="0",l.style.marginRight="0",p.style.width="2px",p.appendChild(l),b.reliableMarginRight=(parseInt((a.getComputedStyle(l,null)||{marginRight:0}).marginRight,10)||0)===0),typeof p.style.zoom!="undefined"&&(p.innerHTML="",p.style.width=p.style.padding="1px",p.style.border=0,p.style.overflow="hidden",p.style.display="inline",p.style.zoom=1,b.inlineBlockNeedsLayout=p.offsetWidth===3,p.style.display="block",p.style.overflow="visible",p.innerHTML="
",b.shrinkWrapBlocks=p.offsetWidth!==3),p.style.cssText=r+s,p.innerHTML=q,e=p.firstChild,g=e.firstChild,i=e.nextSibling.firstChild.firstChild,j={doesNotAddBorder:g.offsetTop!==5,doesAddBorderForTableAndCells:i.offsetTop===5},g.style.position="fixed",g.style.top="20px",j.fixedPosition=g.offsetTop===20||g.offsetTop===15,g.style.position=g.style.top="",e.style.overflow="hidden",e.style.position="relative",j.subtractsBorderForOverflowNotVisible=g.offsetTop===-5,j.doesNotIncludeMarginInBodyOffset=u.offsetTop!==m,a.getComputedStyle&&(p.style.marginTop="1%",b.pixelMargin=(a.getComputedStyle(p,null)||{marginTop:0}).marginTop!=="1%"),typeof d.style.zoom!="undefined"&&(d.style.zoom=1),u.removeChild(d),l=p=d=null,f.extend(b,j))});return b}();var j=/^(?:\{.*\}|\[.*\])$/,k=/([A-Z])/g;f.extend({cache:{},uuid:0,expando:"jQuery"+(f.fn.jquery+Math.random()).replace(/\D/g,""),noData:{embed:!0,object:"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000",applet:!0},hasData:function(a){a=a.nodeType?f.cache[a[f.expando]]:a[f.expando];return!!a&&!m(a)},data:function(a,c,d,e){if(!!f.acceptData(a)){var g,h,i,j=f.expando,k=typeof c=="string",l=a.nodeType,m=l?f.cache:a,n=l?a[j]:a[j]&&j,o=c==="events";if((!n||!m[n]||!o&&!e&&!m[n].data)&&k&&d===b)return;n||(l?a[j]=n=++f.uuid:n=j),m[n]||(m[n]={},l||(m[n].toJSON=f.noop));if(typeof c=="object"||typeof c=="function")e?m[n]=f.extend(m[n],c):m[n].data=f.extend(m[n].data,c);g=h=m[n],e||(h.data||(h.data={}),h=h.data),d!==b&&(h[f.camelCase(c)]=d);if(o&&!h[c])return g.events;k?(i=h[c],i==null&&(i=h[f.camelCase(c)])):i=h;return i}},removeData:function(a,b,c){if(!!f.acceptData(a)){var d,e,g,h=f.expando,i=a.nodeType,j=i?f.cache:a,k=i?a[h]:h;if(!j[k])return;if(b){d=c?j[k]:j[k].data;if(d){f.isArray(b)||(b in d?b=[b]:(b=f.camelCase(b),b in d?b=[b]:b=b.split(" ")));for(e=0,g=b.length;e1,null,!1)},removeData:function(a){return this.each(function(){f.removeData(this,a)})}}),f.extend({_mark:function(a,b){a&&(b=(b||"fx")+"mark",f._data(a,b,(f._data(a,b)||0)+1))},_unmark:function(a,b,c){a!==!0&&(c=b,b=a,a=!1);if(b){c=c||"fx";var d=c+"mark",e=a?0:(f._data(b,d)||1)-1;e?f._data(b,d,e):(f.removeData(b,d,!0),n(b,c,"mark"))}},queue:function(a,b,c){var d;if(a){b=(b||"fx")+"queue",d=f._data(a,b),c&&(!d||f.isArray(c)?d=f._data(a,b,f.makeArray(c)):d.push(c));return d||[]}},dequeue:function(a,b){b=b||"fx";var c=f.queue(a,b),d=c.shift(),e={};d==="inprogress"&&(d=c.shift()),d&&(b==="fx"&&c.unshift("inprogress"),f._data(a,b+".run",e),d.call(a,function(){f.dequeue(a,b)},e)),c.length||(f.removeData(a,b+"queue "+b+".run",!0),n(a,b,"queue"))}}),f.fn.extend({queue:function(a,c){var d=2;typeof a!="string"&&(c=a,a="fx",d--);if(arguments.length1)},removeAttr:function(a){return this.each(function(){f.removeAttr(this,a)})},prop:function(a,b){return f.access(this,f.prop,a,b,arguments.length>1)},removeProp:function(a){a=f.propFix[a]||a;return this.each(function(){try{this[a]=b,delete this[a]}catch(c){}})},addClass:function(a){var b,c,d,e,g,h,i;if(f.isFunction(a))return this.each(function(b){f(this).addClass(a.call(this,b,this.className))});if(a&&typeof a=="string"){b=a.split(p);for(c=0,d=this.length;c-1)return!0;return!1},val:function(a){var c,d,e,g=this[0];{if(!!arguments.length){e=f.isFunction(a);return this.each(function(d){var g=f(this),h;if(this.nodeType===1){e?h=a.call(this,d,g.val()):h=a,h==null?h="":typeof h=="number"?h+="":f.isArray(h)&&(h=f.map(h,function(a){return a==null?"":a+""})),c=f.valHooks[this.type]||f.valHooks[this.nodeName.toLowerCase()];if(!c||!("set"in c)||c.set(this,h,"value")===b)this.value=h}})}if(g){c=f.valHooks[g.type]||f.valHooks[g.nodeName.toLowerCase()];if(c&&"get"in c&&(d=c.get(g,"value"))!==b)return d;d=g.value;return typeof d=="string"?d.replace(q,""):d==null?"":d}}}}),f.extend({valHooks:{option:{get:function(a){var b=a.attributes.value;return!b||b.specified?a.value:a.text}},select:{get:function(a){var b,c,d,e,g=a.selectedIndex,h=[],i=a.options,j=a.type==="select-one";if(g<0)return null;c=j?g:0,d=j?g+1:i.length;for(;c=0}),c.length||(a.selectedIndex=-1);return c}}},attrFn:{val:!0,css:!0,html:!0,text:!0,data:!0,width:!0,height:!0,offset:!0},attr:function(a,c,d,e){var g,h,i,j=a.nodeType;if(!!a&&j!==3&&j!==8&&j!==2){if(e&&c in f.attrFn)return f(a)[c](d);if(typeof a.getAttribute=="undefined")return f.prop(a,c,d);i=j!==1||!f.isXMLDoc(a),i&&(c=c.toLowerCase(),h=f.attrHooks[c]||(u.test(c)?x:w));if(d!==b){if(d===null){f.removeAttr(a,c);return}if(h&&"set"in h&&i&&(g=h.set(a,d,c))!==b)return g;a.setAttribute(c,""+d);return d}if(h&&"get"in h&&i&&(g=h.get(a,c))!==null)return g;g=a.getAttribute(c);return g===null?b:g}},removeAttr:function(a,b){var c,d,e,g,h,i=0;if(b&&a.nodeType===1){d=b.toLowerCase().split(p),g=d.length;for(;i=0}})});var z=/^(?:textarea|input|select)$/i,A=/^([^\.]*)?(?:\.(.+))?$/,B=/(?:^|\s)hover(\.\S+)?\b/,C=/^key/,D=/^(?:mouse|contextmenu)|click/,E=/^(?:focusinfocus|focusoutblur)$/,F=/^(\w*)(?:#([\w\-]+))?(?:\.([\w\-]+))?$/,G=function( 3 | a){var b=F.exec(a);b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));return b},H=function(a,b){var c=a.attributes||{};return(!b[1]||a.nodeName.toLowerCase()===b[1])&&(!b[2]||(c.id||{}).value===b[2])&&(!b[3]||b[3].test((c["class"]||{}).value))},I=function(a){return f.event.special.hover?a:a.replace(B,"mouseenter$1 mouseleave$1")};f.event={add:function(a,c,d,e,g){var h,i,j,k,l,m,n,o,p,q,r,s;if(!(a.nodeType===3||a.nodeType===8||!c||!d||!(h=f._data(a)))){d.handler&&(p=d,d=p.handler,g=p.selector),d.guid||(d.guid=f.guid++),j=h.events,j||(h.events=j={}),i=h.handle,i||(h.handle=i=function(a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b},i.elem=a),c=f.trim(I(c)).split(" ");for(k=0;k=0&&(h=h.slice(0,-1),k=!0),h.indexOf(".")>=0&&(i=h.split("."),h=i.shift(),i.sort());if((!e||f.event.customEvent[h])&&!f.event.global[h])return;c=typeof c=="object"?c[f.expando]?c:new f.Event(h,c):new f.Event(h),c.type=h,c.isTrigger=!0,c.exclusive=k,c.namespace=i.join("."),c.namespace_re=c.namespace?new RegExp("(^|\\.)"+i.join("\\.(?:.*\\.)?")+"(\\.|$)"):null,o=h.indexOf(":")<0?"on"+h:"";if(!e){j=f.cache;for(l in j)j[l].events&&j[l].events[h]&&f.event.trigger(c,d,j[l].handle.elem,!0);return}c.result=b,c.target||(c.target=e),d=d!=null?f.makeArray(d):[],d.unshift(c),p=f.event.special[h]||{};if(p.trigger&&p.trigger.apply(e,d)===!1)return;r=[[e,p.bindType||h]];if(!g&&!p.noBubble&&!f.isWindow(e)){s=p.delegateType||h,m=E.test(s+h)?e:e.parentNode,n=null;for(;m;m=m.parentNode)r.push([m,s]),n=m;n&&n===e.ownerDocument&&r.push([n.defaultView||n.parentWindow||a,s])}for(l=0;le&&j.push({elem:this,matches:d.slice(e)});for(k=0;k0?this.on(b,null,a,c):this.trigger(b)},f.attrFn&&(f.attrFn[b]=!0),C.test(b)&&(f.event.fixHooks[b]=f.event.keyHooks),D.test(b)&&(f.event.fixHooks[b]=f.event.mouseHooks)}),function(){function x(a,b,c,e,f,g){for(var h=0,i=e.length;h0){k=j;break}}j=j[a]}e[h]=k}}}function w(a,b,c,e,f,g){for(var h=0,i=e.length;h+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g,d="sizcache"+(Math.random()+"").replace(".",""),e=0,g=Object.prototype.toString,h=!1,i=!0,j=/\\/g,k=/\r\n/g,l=/\W/;[0,0].sort(function(){i=!1;return 0});var m=function(b,d,e,f){e=e||[],d=d||c;var h=d;if(d.nodeType!==1&&d.nodeType!==9)return[];if(!b||typeof b!="string")return e;var i,j,k,l,n,q,r,t,u=!0,v=m.isXML(d),w=[],x=b;do{a.exec(""),i=a.exec(x);if(i){x=i[3],w.push(i[1]);if(i[2]){l=i[3];break}}}while(i);if(w.length>1&&p.exec(b))if(w.length===2&&o.relative[w[0]])j=y(w[0]+w[1],d,f);else{j=o.relative[w[0]]?[d]:m(w.shift(),d);while(w.length)b=w.shift(),o.relative[b]&&(b+=w.shift()),j=y(b,j,f)}else{!f&&w.length>1&&d.nodeType===9&&!v&&o.match.ID.test(w[0])&&!o.match.ID.test(w[w.length-1])&&(n=m.find(w.shift(),d,v),d=n.expr?m.filter(n.expr,n.set)[0]:n.set[0]);if(d){n=f?{expr:w.pop(),set:s(f)}:m.find(w.pop(),w.length===1&&(w[0]==="~"||w[0]==="+")&&d.parentNode?d.parentNode:d,v),j=n.expr?m.filter(n.expr,n.set):n.set,w.length>0?k=s(j):u=!1;while(w.length)q=w.pop(),r=q,o.relative[q]?r=w.pop():q="",r==null&&(r=d),o.relative[q](k,r,v)}else k=w=[]}k||(k=j),k||m.error(q||b);if(g.call(k)==="[object Array]")if(!u)e.push.apply(e,k);else if(d&&d.nodeType===1)for(t=0;k[t]!=null;t++)k[t]&&(k[t]===!0||k[t].nodeType===1&&m.contains(d,k[t]))&&e.push(j[t]);else for(t=0;k[t]!=null;t++)k[t]&&k[t].nodeType===1&&e.push(j[t]);else s(k,e);l&&(m(l,h,e,f),m.uniqueSort(e));return e};m.uniqueSort=function(a){if(u){h=i,a.sort(u);if(h)for(var b=1;b0},m.find=function(a,b,c){var d,e,f,g,h,i;if(!a)return[];for(e=0,f=o.order.length;e":function(a,b){var c,d=typeof b=="string",e=0,f=a.length;if(d&&!l.test(b)){b=b.toLowerCase();for(;e=0)?c||d.push(h):c&&(b[g]=!1));return!1},ID:function(a){return a[1].replace(j,"")},TAG:function(a,b){return a[1].replace(j,"").toLowerCase()},CHILD:function(a){if(a[1]==="nth"){a[2]||m.error(a[0]),a[2]=a[2].replace(/^\+|\s*/g,"");var b=/(-?)(\d*)(?:n([+\-]?\d*))?/.exec(a[2]==="even"&&"2n"||a[2]==="odd"&&"2n+1"||!/\D/.test(a[2])&&"0n+"+a[2]||a[2]);a[2]=b[1]+(b[2]||1)-0,a[3]=b[3]-0}else a[2]&&m.error(a[0]);a[0]=e++;return a},ATTR:function(a,b,c,d,e,f){var g=a[1]=a[1].replace(j,"");!f&&o.attrMap[g]&&(a[1]=o.attrMap[g]),a[4]=(a[4]||a[5]||"").replace(j,""),a[2]==="~="&&(a[4]=" "+a[4]+" ");return a},PSEUDO:function(b,c,d,e,f){if(b[1]==="not")if((a.exec(b[3])||"").length>1||/^\w/.test(b[3]))b[3]=m(b[3],null,null,c);else{var g=m.filter(b[3],c,d,!0^f);d||e.push.apply(e,g);return!1}else if(o.match.POS.test(b[0])||o.match.CHILD.test(b[0]))return!0;return b},POS:function(a){a.unshift(!0);return a}},filters:{enabled:function(a){return a.disabled===!1&&a.type!=="hidden"},disabled:function(a){return a.disabled===!0},checked:function(a){return a.checked===!0},selected:function(a){a.parentNode&&a.parentNode.selectedIndex;return a.selected===!0},parent:function(a){return!!a.firstChild},empty:function(a){return!a.firstChild},has:function(a,b,c){return!!m(c[3],a).length},header:function(a){return/h\d/i.test(a.nodeName)},text:function(a){var b=a.getAttribute("type"),c=a.type;return a.nodeName.toLowerCase()==="input"&&"text"===c&&(b===c||b===null)},radio:function(a){return a.nodeName.toLowerCase()==="input"&&"radio"===a.type},checkbox:function(a){return a.nodeName.toLowerCase()==="input"&&"checkbox"===a.type},file:function(a){return a.nodeName.toLowerCase()==="input"&&"file"===a.type},password:function(a){return a.nodeName.toLowerCase()==="input"&&"password"===a.type},submit:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"submit"===a.type},image:function(a){return a.nodeName.toLowerCase()==="input"&&"image"===a.type},reset:function(a){var b=a.nodeName.toLowerCase();return(b==="input"||b==="button")&&"reset"===a.type},button:function(a){var b=a.nodeName.toLowerCase();return b==="input"&&"button"===a.type||b==="button"},input:function(a){return/input|select|textarea|button/i.test(a.nodeName)},focus:function(a){return a===a.ownerDocument.activeElement}},setFilters:{first:function(a,b){return b===0},last:function(a,b,c,d){return b===d.length-1},even:function(a,b){return b%2===0},odd:function(a,b){return b%2===1},lt:function(a,b,c){return bc[3]-0},nth:function(a,b,c){return c[3]-0===b},eq:function(a,b,c){return c[3]-0===b}},filter:{PSEUDO:function(a,b,c,d){var e=b[1],f=o.filters[e];if(f)return f(a,c,b,d);if(e==="contains")return(a.textContent||a.innerText||n([a])||"").indexOf(b[3])>=0;if(e==="not"){var g=b[3];for(var h=0,i=g.length;h=0}},ID:function(a,b){return a.nodeType===1&&a.getAttribute("id")===b},TAG:function(a,b){return b==="*"&&a.nodeType===1||!!a.nodeName&&a.nodeName.toLowerCase()===b},CLASS:function(a,b){return(" "+(a.className||a.getAttribute("class"))+" ").indexOf(b)>-1},ATTR:function(a,b){var c=b[1],d=m.attr?m.attr(a,c):o.attrHandle[c]?o.attrHandle[c](a):a[c]!=null?a[c]:a.getAttribute(c),e=d+"",f=b[2],g=b[4];return d==null?f==="!=":!f&&m.attr?d!=null:f==="="?e===g:f==="*="?e.indexOf(g)>=0:f==="~="?(" "+e+" ").indexOf(g)>=0:g?f==="!="?e!==g:f==="^="?e.indexOf(g)===0:f==="$="?e.substr(e.length-g.length)===g:f==="|="?e===g||e.substr(0,g.length+1)===g+"-":!1:e&&d!==!1},POS:function(a,b,c,d){var e=b[2],f=o.setFilters[e];if(f)return f(a,c,b,d)}}},p=o.match.POS,q=function(a,b){return"\\"+(b-0+1)};for(var r in o.match)o.match[r]=new RegExp(o.match[r].source+/(?![^\[]*\])(?![^\(]*\))/.source),o.leftMatch[r]=new RegExp(/(^(?:.|\r|\n)*?)/.source+o.match[r].source.replace(/\\(\d+)/g,q));o.match.globalPOS=p;var s=function(a,b){a=Array.prototype.slice.call(a,0);if(b){b.push.apply(b,a);return b}return a};try{Array.prototype.slice.call(c.documentElement.childNodes,0)[0].nodeType}catch(t){s=function(a,b){var c=0,d=b||[];if(g.call(a)==="[object Array]")Array.prototype.push.apply(d,a);else if(typeof a.length=="number")for(var e=a.length;c",e.insertBefore(a,e.firstChild),c.getElementById(d)&&(o.find.ID=function(a,c,d){if(typeof c.getElementById!="undefined"&&!d){var e=c.getElementById(a[1]);return e?e.id===a[1]||typeof e.getAttributeNode!="undefined"&&e.getAttributeNode("id").nodeValue===a[1]?[e]:b:[]}},o.filter.ID=function(a,b){var c=typeof a.getAttributeNode!="undefined"&&a.getAttributeNode("id");return a.nodeType===1&&c&&c.nodeValue===b}),e.removeChild(a),e=a=null}(),function(){var a=c.createElement("div");a.appendChild(c.createComment("")),a.getElementsByTagName("*").length>0&&(o.find.TAG=function(a,b){var c=b.getElementsByTagName(a[1]);if(a[1]==="*"){var d=[];for(var e=0;c[e];e++)c[e].nodeType===1&&d.push(c[e]);c=d}return c}),a.innerHTML="",a.firstChild&&typeof a.firstChild.getAttribute!="undefined"&&a.firstChild.getAttribute("href")!=="#"&&(o.attrHandle.href=function(a){return a.getAttribute("href",2)}),a=null}(),c.querySelectorAll&&function(){var a=m,b=c.createElement("div"),d="__sizzle__";b.innerHTML="

";if(!b.querySelectorAll||b.querySelectorAll(".TEST").length!==0){m=function(b,e,f,g){e=e||c;if(!g&&!m.isXML(e)){var h=/^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(b);if(h&&(e.nodeType===1||e.nodeType===9)){if(h[1])return s(e.getElementsByTagName(b),f);if(h[2]&&o.find.CLASS&&e.getElementsByClassName)return s(e.getElementsByClassName(h[2]),f)}if(e.nodeType===9){if(b==="body"&&e.body)return s([e.body],f);if(h&&h[3]){var i=e.getElementById(h[3]);if(!i||!i.parentNode)return s([],f);if(i.id===h[3])return s([i],f)}try{return s(e.querySelectorAll(b),f)}catch(j){}}else if(e.nodeType===1&&e.nodeName.toLowerCase()!=="object"){var k=e,l=e.getAttribute("id"),n=l||d,p=e.parentNode,q=/^\s*[+~]/.test(b);l?n=n.replace(/'/g,"\\$&"):e.setAttribute("id",n),q&&p&&(e=e.parentNode);try{if(!q||p)return s(e.querySelectorAll("[id='"+n+"'] "+b),f)}catch(r){}finally{l||k.removeAttribute("id")}}}return a(b,e,f,g)};for(var e in a)m[e]=a[e];b=null}}(),function(){var a=c.documentElement,b=a.matchesSelector||a.mozMatchesSelector||a.webkitMatchesSelector||a.msMatchesSelector;if(b){var d=!b.call(c.createElement("div"),"div"),e=!1;try{b.call(c.documentElement,"[test!='']:sizzle")}catch(f){e=!0}m.matchesSelector=function(a,c){c=c.replace(/\=\s*([^'"\]]*)\s*\]/g,"='$1']");if(!m.isXML(a))try{if(e||!o.match.PSEUDO.test(c)&&!/!=/.test(c)){var f=b.call(a,c);if(f||!d||a.document&&a.document.nodeType!==11)return f}}catch(g){}return m(c,null,null,[a]).length>0}}}(),function(){var a=c.createElement("div");a.innerHTML="
";if(!!a.getElementsByClassName&&a.getElementsByClassName("e").length!==0){a.lastChild.className="e";if(a.getElementsByClassName("e").length===1)return;o.order.splice(1,0,"CLASS"),o.find.CLASS=function(a,b,c){if(typeof b.getElementsByClassName!="undefined"&&!c)return b.getElementsByClassName(a[1])},a=null}}(),c.documentElement.contains?m.contains=function(a,b){return a!==b&&(a.contains?a.contains(b):!0)}:c.documentElement.compareDocumentPosition?m.contains=function(a,b){return!!(a.compareDocumentPosition(b)&16)}:m.contains=function(){return!1},m.isXML=function(a){var b=(a?a.ownerDocument||a:0).documentElement;return b?b.nodeName!=="HTML":!1};var y=function(a,b,c){var d,e=[],f="",g=b.nodeType?[b]:b;while(d=o.match.PSEUDO.exec(a))f+=d[0],a=a.replace(o.match.PSEUDO,"");a=o.relative[a]?a+"*":a;for(var h=0,i=g.length;h0)for(h=g;h=0:f.filter(a,this).length>0:this.filter(a).length>0)},closest:function(a,b){var c=[],d,e,g=this[0];if(f.isArray(a)){var h=1;while(g&&g.ownerDocument&&g!==b){for(d=0;d-1:f.find.matchesSelector(g,a)){c.push(g);break}g=g.parentNode;if(!g||!g.ownerDocument||g===b||g.nodeType===11)break}}c=c.length>1?f.unique(c):c;return this.pushStack(c,"closest",a)},index:function(a){if(!a)return this[0]&&this[0].parentNode?this.prevAll().length:-1;if(typeof a=="string")return f.inArray(this[0],f(a));return f.inArray(a.jquery?a[0]:a,this)},add:function(a,b){var c=typeof a=="string"?f(a,b):f.makeArray(a&&a.nodeType?[a]:a),d=f.merge(this.get(),c);return this.pushStack(S(c[0])||S(d[0])?d:f.unique(d))},andSelf:function(){return this.add(this.prevObject)}}),f.each({parent:function(a){var b=a.parentNode;return b&&b.nodeType!==11?b:null},parents:function(a){return f.dir(a,"parentNode")},parentsUntil:function(a,b,c){return f.dir(a,"parentNode",c)},next:function(a){return f.nth(a,2,"nextSibling")},prev:function(a){return f.nth(a,2,"previousSibling")},nextAll:function(a){return f.dir(a,"nextSibling")},prevAll:function(a){return f.dir(a,"previousSibling")},nextUntil:function(a,b,c){return f.dir(a,"nextSibling",c)},prevUntil:function(a,b,c){return f.dir(a,"previousSibling",c)},siblings:function(a){return f.sibling((a.parentNode||{}).firstChild,a)},children:function(a){return f.sibling(a.firstChild)},contents:function(a){return f.nodeName(a,"iframe")?a.contentDocument||a.contentWindow.document:f.makeArray(a.childNodes)}},function(a,b){f.fn[a]=function(c,d){var e=f.map(this,b,c);L.test(a)||(d=c),d&&typeof d=="string"&&(e=f.filter(d,e)),e=this.length>1&&!R[a]?f.unique(e):e,(this.length>1||N.test(d))&&M.test(a)&&(e=e.reverse());return this.pushStack(e,a,P.call(arguments).join(","))}}),f.extend({filter:function(a,b,c){c&&(a=":not("+a+")");return b.length===1?f.find.matchesSelector(b[0],a)?[b[0]]:[]:f.find.matches(a,b)},dir:function(a,c,d){var e=[],g=a[c];while(g&&g.nodeType!==9&&(d===b||g.nodeType!==1||!f(g).is(d)))g.nodeType===1&&e.push(g),g=g[c];return e},nth:function(a,b,c,d){b=b||1;var e=0;for(;a;a=a[c])if(a.nodeType===1&&++e===b)break;return a},sibling:function(a,b){var c=[];for(;a;a=a.nextSibling)a.nodeType===1&&a!==b&&c.push(a);return c}});var V="abbr|article|aside|audio|bdi|canvas|data|datalist|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video",W=/ jQuery\d+="(?:\d+|null)"/g,X=/^\s+/,Y=/<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/ig,Z=/<([\w:]+)/,$=/]","i"),bd=/checked\s*(?:[^=]|=\s*.checked.)/i,be=/\/(java|ecma)script/i,bf=/^\s*",""],legend:[1,"
","
"],thead:[1,"","
"],tr:[2,"","
"],td:[3,"","
"],col:[2,"","
"],area:[1,"",""],_default:[0,"",""]},bh=U(c);bg.optgroup=bg.option,bg.tbody=bg.tfoot=bg.colgroup=bg.caption=bg.thead,bg.th=bg.td,f.support.htmlSerialize||(bg._default=[1,"div
","
"]),f.fn.extend({text:function(a){return f.access(this,function(a){return a===b?f.text(this):this.empty().append((this[0]&&this[0].ownerDocument||c).createTextNode(a))},null,a,arguments.length)},wrapAll:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapAll(a.call(this,b))});if(this[0]){var b=f(a,this[0].ownerDocument).eq(0).clone(!0);this[0].parentNode&&b.insertBefore(this[0]),b.map(function(){var a=this;while(a.firstChild&&a.firstChild.nodeType===1)a=a.firstChild;return a}).append(this)}return this},wrapInner:function(a){if(f.isFunction(a))return this.each(function(b){f(this).wrapInner(a.call(this,b))});return this.each(function(){var b=f(this),c=b.contents();c.length?c.wrapAll(a):b.append(a)})},wrap:function(a){var b=f.isFunction(a);return this.each(function(c){f(this).wrapAll(b?a.call(this,c):a)})},unwrap:function(){return this.parent().each(function(){f.nodeName(this,"body")||f(this).replaceWith(this.childNodes)}).end()},append:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.appendChild(a)})},prepend:function(){return this.domManip(arguments,!0,function(a){this.nodeType===1&&this.insertBefore(a,this.firstChild)})},before:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this)});if(arguments.length){var a=f 4 | .clean(arguments);a.push.apply(a,this.toArray());return this.pushStack(a,"before",arguments)}},after:function(){if(this[0]&&this[0].parentNode)return this.domManip(arguments,!1,function(a){this.parentNode.insertBefore(a,this.nextSibling)});if(arguments.length){var a=this.pushStack(this,"after",arguments);a.push.apply(a,f.clean(arguments));return a}},remove:function(a,b){for(var c=0,d;(d=this[c])!=null;c++)if(!a||f.filter(a,[d]).length)!b&&d.nodeType===1&&(f.cleanData(d.getElementsByTagName("*")),f.cleanData([d])),d.parentNode&&d.parentNode.removeChild(d);return this},empty:function(){for(var a=0,b;(b=this[a])!=null;a++){b.nodeType===1&&f.cleanData(b.getElementsByTagName("*"));while(b.firstChild)b.removeChild(b.firstChild)}return this},clone:function(a,b){a=a==null?!1:a,b=b==null?a:b;return this.map(function(){return f.clone(this,a,b)})},html:function(a){return f.access(this,function(a){var c=this[0]||{},d=0,e=this.length;if(a===b)return c.nodeType===1?c.innerHTML.replace(W,""):null;if(typeof a=="string"&&!ba.test(a)&&(f.support.leadingWhitespace||!X.test(a))&&!bg[(Z.exec(a)||["",""])[1].toLowerCase()]){a=a.replace(Y,"<$1>");try{for(;d1&&l0?this.clone(!0):this).get();f(e[h])[b](j),d=d.concat(j)}return this.pushStack(d,a,e.selector)}}),f.extend({clone:function(a,b,c){var d,e,g,h=f.support.html5Clone||f.isXMLDoc(a)||!bc.test("<"+a.nodeName+">")?a.cloneNode(!0):bo(a);if((!f.support.noCloneEvent||!f.support.noCloneChecked)&&(a.nodeType===1||a.nodeType===11)&&!f.isXMLDoc(a)){bk(a,h),d=bl(a),e=bl(h);for(g=0;d[g];++g)e[g]&&bk(d[g],e[g])}if(b){bj(a,h);if(c){d=bl(a),e=bl(h);for(g=0;d[g];++g)bj(d[g],e[g])}}d=e=null;return h},clean:function(a,b,d,e){var g,h,i,j=[];b=b||c,typeof b.createElement=="undefined"&&(b=b.ownerDocument||b[0]&&b[0].ownerDocument||c);for(var k=0,l;(l=a[k])!=null;k++){typeof l=="number"&&(l+="");if(!l)continue;if(typeof l=="string")if(!_.test(l))l=b.createTextNode(l);else{l=l.replace(Y,"<$1>");var m=(Z.exec(l)||["",""])[1].toLowerCase(),n=bg[m]||bg._default,o=n[0],p=b.createElement("div"),q=bh.childNodes,r;b===c?bh.appendChild(p):U(b).appendChild(p),p.innerHTML=n[1]+l+n[2];while(o--)p=p.lastChild;if(!f.support.tbody){var s=$.test(l),t=m==="table"&&!s?p.firstChild&&p.firstChild.childNodes:n[1]===""&&!s?p.childNodes:[];for(i=t.length-1;i>=0;--i)f.nodeName(t[i],"tbody")&&!t[i].childNodes.length&&t[i].parentNode.removeChild(t[i])}!f.support.leadingWhitespace&&X.test(l)&&p.insertBefore(b.createTextNode(X.exec(l)[0]),p.firstChild),l=p.childNodes,p&&(p.parentNode.removeChild(p),q.length>0&&(r=q[q.length-1],r&&r.parentNode&&r.parentNode.removeChild(r)))}var u;if(!f.support.appendChecked)if(l[0]&&typeof (u=l.length)=="number")for(i=0;i1)},f.extend({cssHooks:{opacity:{get:function(a,b){if(b){var c=by(a,"opacity");return c===""?"1":c}return a.style.opacity}}},cssNumber:{fillOpacity:!0,fontWeight:!0,lineHeight:!0,opacity:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{"float":f.support.cssFloat?"cssFloat":"styleFloat"},style:function(a,c,d,e){if(!!a&&a.nodeType!==3&&a.nodeType!==8&&!!a.style){var g,h,i=f.camelCase(c),j=a.style,k=f.cssHooks[i];c=f.cssProps[i]||i;if(d===b){if(k&&"get"in k&&(g=k.get(a,!1,e))!==b)return g;return j[c]}h=typeof d,h==="string"&&(g=bu.exec(d))&&(d=+(g[1]+1)*+g[2]+parseFloat(f.css(a,c)),h="number");if(d==null||h==="number"&&isNaN(d))return;h==="number"&&!f.cssNumber[i]&&(d+="px");if(!k||!("set"in k)||(d=k.set(a,d))!==b)try{j[c]=d}catch(l){}}},css:function(a,c,d){var e,g;c=f.camelCase(c),g=f.cssHooks[c],c=f.cssProps[c]||c,c==="cssFloat"&&(c="float");if(g&&"get"in g&&(e=g.get(a,!0,d))!==b)return e;if(by)return by(a,c)},swap:function(a,b,c){var d={},e,f;for(f in b)d[f]=a.style[f],a.style[f]=b[f];e=c.call(a);for(f in b)a.style[f]=d[f];return e}}),f.curCSS=f.css,c.defaultView&&c.defaultView.getComputedStyle&&(bz=function(a,b){var c,d,e,g,h=a.style;b=b.replace(br,"-$1").toLowerCase(),(d=a.ownerDocument.defaultView)&&(e=d.getComputedStyle(a,null))&&(c=e.getPropertyValue(b),c===""&&!f.contains(a.ownerDocument.documentElement,a)&&(c=f.style(a,b))),!f.support.pixelMargin&&e&&bv.test(b)&&bt.test(c)&&(g=h.width,h.width=c,c=e.width,h.width=g);return c}),c.documentElement.currentStyle&&(bA=function(a,b){var c,d,e,f=a.currentStyle&&a.currentStyle[b],g=a.style;f==null&&g&&(e=g[b])&&(f=e),bt.test(f)&&(c=g.left,d=a.runtimeStyle&&a.runtimeStyle.left,d&&(a.runtimeStyle.left=a.currentStyle.left),g.left=b==="fontSize"?"1em":f,f=g.pixelLeft+"px",g.left=c,d&&(a.runtimeStyle.left=d));return f===""?"auto":f}),by=bz||bA,f.each(["height","width"],function(a,b){f.cssHooks[b]={get:function(a,c,d){if(c)return a.offsetWidth!==0?bB(a,b,d):f.swap(a,bw,function(){return bB(a,b,d)})},set:function(a,b){return bs.test(b)?b+"px":b}}}),f.support.opacity||(f.cssHooks.opacity={get:function(a,b){return bq.test((b&&a.currentStyle?a.currentStyle.filter:a.style.filter)||"")?parseFloat(RegExp.$1)/100+"":b?"1":""},set:function(a,b){var c=a.style,d=a.currentStyle,e=f.isNumeric(b)?"alpha(opacity="+b*100+")":"",g=d&&d.filter||c.filter||"";c.zoom=1;if(b>=1&&f.trim(g.replace(bp,""))===""){c.removeAttribute("filter");if(d&&!d.filter)return}c.filter=bp.test(g)?g.replace(bp,e):g+" "+e}}),f(function(){f.support.reliableMarginRight||(f.cssHooks.marginRight={get:function(a,b){return f.swap(a,{display:"inline-block"},function(){return b?by(a,"margin-right"):a.style.marginRight})}})}),f.expr&&f.expr.filters&&(f.expr.filters.hidden=function(a){var b=a.offsetWidth,c=a.offsetHeight;return b===0&&c===0||!f.support.reliableHiddenOffsets&&(a.style&&a.style.display||f.css(a,"display"))==="none"},f.expr.filters.visible=function(a){return!f.expr.filters.hidden(a)}),f.each({margin:"",padding:"",border:"Width"},function(a,b){f.cssHooks[a+b]={expand:function(c){var d,e=typeof c=="string"?c.split(" "):[c],f={};for(d=0;d<4;d++)f[a+bx[d]+b]=e[d]||e[d-2]||e[0];return f}}});var bC=/%20/g,bD=/\[\]$/,bE=/\r?\n/g,bF=/#.*$/,bG=/^(.*?):[ \t]*([^\r\n]*)\r?$/mg,bH=/^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i,bI=/^(?:about|app|app\-storage|.+\-extension|file|res|widget):$/,bJ=/^(?:GET|HEAD)$/,bK=/^\/\//,bL=/\?/,bM=/)<[^<]*)*<\/script>/gi,bN=/^(?:select|textarea)/i,bO=/\s+/,bP=/([?&])_=[^&]*/,bQ=/^([\w\+\.\-]+:)(?:\/\/([^\/?#:]*)(?::(\d+))?)?/,bR=f.fn.load,bS={},bT={},bU,bV,bW=["*/"]+["*"];try{bU=e.href}catch(bX){bU=c.createElement("a"),bU.href="",bU=bU.href}bV=bQ.exec(bU.toLowerCase())||[],f.fn.extend({load:function(a,c,d){if(typeof a!="string"&&bR)return bR.apply(this,arguments);if(!this.length)return this;var e=a.indexOf(" ");if(e>=0){var g=a.slice(e,a.length);a=a.slice(0,e)}var h="GET";c&&(f.isFunction(c)?(d=c,c=b):typeof c=="object"&&(c=f.param(c,f.ajaxSettings.traditional),h="POST"));var i=this;f.ajax({url:a,type:h,dataType:"html",data:c,complete:function(a,b,c){c=a.responseText,a.isResolved()&&(a.done(function(a){c=a}),i.html(g?f("
").append(c.replace(bM,"")).find(g):c)),d&&i.each(d,[c,b,a])}});return this},serialize:function(){return f.param(this.serializeArray())},serializeArray:function(){return this.map(function(){return this.elements?f.makeArray(this.elements):this}).filter(function(){return this.name&&!this.disabled&&(this.checked||bN.test(this.nodeName)||bH.test(this.type))}).map(function(a,b){var c=f(this).val();return c==null?null:f.isArray(c)?f.map(c,function(a,c){return{name:b.name,value:a.replace(bE,"\r\n")}}):{name:b.name,value:c.replace(bE,"\r\n")}}).get()}}),f.each("ajaxStart ajaxStop ajaxComplete ajaxError ajaxSuccess ajaxSend".split(" "),function(a,b){f.fn[b]=function(a){return this.on(b,a)}}),f.each(["get","post"],function(a,c){f[c]=function(a,d,e,g){f.isFunction(d)&&(g=g||e,e=d,d=b);return f.ajax({type:c,url:a,data:d,success:e,dataType:g})}}),f.extend({getScript:function(a,c){return f.get(a,b,c,"script")},getJSON:function(a,b,c){return f.get(a,b,c,"json")},ajaxSetup:function(a,b){b?b$(a,f.ajaxSettings):(b=a,a=f.ajaxSettings),b$(a,b);return a},ajaxSettings:{url:bU,isLocal:bI.test(bV[1]),global:!0,type:"GET",contentType:"application/x-www-form-urlencoded; charset=UTF-8",processData:!0,async:!0,accepts:{xml:"application/xml, text/xml",html:"text/html",text:"text/plain",json:"application/json, text/javascript","*":bW},contents:{xml:/xml/,html:/html/,json:/json/},responseFields:{xml:"responseXML",text:"responseText"},converters:{"* text":a.String,"text html":!0,"text json":f.parseJSON,"text xml":f.parseXML},flatOptions:{context:!0,url:!0}},ajaxPrefilter:bY(bS),ajaxTransport:bY(bT),ajax:function(a,c){function w(a,c,l,m){if(s!==2){s=2,q&&clearTimeout(q),p=b,n=m||"",v.readyState=a>0?4:0;var o,r,u,w=c,x=l?ca(d,v,l):b,y,z;if(a>=200&&a<300||a===304){if(d.ifModified){if(y=v.getResponseHeader("Last-Modified"))f.lastModified[k]=y;if(z=v.getResponseHeader("Etag"))f.etag[k]=z}if(a===304)w="notmodified",o=!0;else try{r=cb(d,x),w="success",o=!0}catch(A){w="parsererror",u=A}}else{u=w;if(!w||a)w="error",a<0&&(a=0)}v.status=a,v.statusText=""+(c||w),o?h.resolveWith(e,[r,w,v]):h.rejectWith(e,[v,w,u]),v.statusCode(j),j=b,t&&g.trigger("ajax"+(o?"Success":"Error"),[v,d,o?r:u]),i.fireWith(e,[v,w]),t&&(g.trigger("ajaxComplete",[v,d]),--f.active||f.event.trigger("ajaxStop"))}}typeof a=="object"&&(c=a,a=b),c=c||{};var d=f.ajaxSetup({},c),e=d.context||d,g=e!==d&&(e.nodeType||e instanceof f)?f(e):f.event,h=f.Deferred(),i=f.Callbacks("once memory"),j=d.statusCode||{},k,l={},m={},n,o,p,q,r,s=0,t,u,v={readyState:0,setRequestHeader:function(a,b){if(!s){var c=a.toLowerCase();a=m[c]=m[c]||a,l[a]=b}return this},getAllResponseHeaders:function(){return s===2?n:null},getResponseHeader:function(a){var c;if(s===2){if(!o){o={};while(c=bG.exec(n))o[c[1].toLowerCase()]=c[2]}c=o[a.toLowerCase()]}return c===b?null:c},overrideMimeType:function(a){s||(d.mimeType=a);return this},abort:function(a){a=a||"abort",p&&p.abort(a),w(0,a);return this}};h.promise(v),v.success=v.done,v.error=v.fail,v.complete=i.add,v.statusCode=function(a){if(a){var b;if(s<2)for(b in a)j[b]=[j[b],a[b]];else b=a[v.status],v.then(b,b)}return this},d.url=((a||d.url)+"").replace(bF,"").replace(bK,bV[1]+"//"),d.dataTypes=f.trim(d.dataType||"*").toLowerCase().split(bO),d.crossDomain==null&&(r=bQ.exec(d.url.toLowerCase()),d.crossDomain=!(!r||r[1]==bV[1]&&r[2]==bV[2]&&(r[3]||(r[1]==="http:"?80:443))==(bV[3]||(bV[1]==="http:"?80:443)))),d.data&&d.processData&&typeof d.data!="string"&&(d.data=f.param(d.data,d.traditional)),bZ(bS,d,c,v);if(s===2)return!1;t=d.global,d.type=d.type.toUpperCase(),d.hasContent=!bJ.test(d.type),t&&f.active++===0&&f.event.trigger("ajaxStart");if(!d.hasContent){d.data&&(d.url+=(bL.test(d.url)?"&":"?")+d.data,delete d.data),k=d.url;if(d.cache===!1){var x=f.now(),y=d.url.replace(bP,"$1_="+x);d.url=y+(y===d.url?(bL.test(d.url)?"&":"?")+"_="+x:"")}}(d.data&&d.hasContent&&d.contentType!==!1||c.contentType)&&v.setRequestHeader("Content-Type",d.contentType),d.ifModified&&(k=k||d.url,f.lastModified[k]&&v.setRequestHeader("If-Modified-Since",f.lastModified[k]),f.etag[k]&&v.setRequestHeader("If-None-Match",f.etag[k])),v.setRequestHeader("Accept",d.dataTypes[0]&&d.accepts[d.dataTypes[0]]?d.accepts[d.dataTypes[0]]+(d.dataTypes[0]!=="*"?", "+bW+"; q=0.01":""):d.accepts["*"]);for(u in d.headers)v.setRequestHeader(u,d.headers[u]);if(d.beforeSend&&(d.beforeSend.call(e,v,d)===!1||s===2)){v.abort();return!1}for(u in{success:1,error:1,complete:1})v[u](d[u]);p=bZ(bT,d,c,v);if(!p)w(-1,"No Transport");else{v.readyState=1,t&&g.trigger("ajaxSend",[v,d]),d.async&&d.timeout>0&&(q=setTimeout(function(){v.abort("timeout")},d.timeout));try{s=1,p.send(l,w)}catch(z){if(s<2)w(-1,z);else throw z}}return v},param:function(a,c){var d=[],e=function(a,b){b=f.isFunction(b)?b():b,d[d.length]=encodeURIComponent(a)+"="+encodeURIComponent(b)};c===b&&(c=f.ajaxSettings.traditional);if(f.isArray(a)||a.jquery&&!f.isPlainObject(a))f.each(a,function(){e(this.name,this.value)});else for(var g in a)b_(g,a[g],c,e);return d.join("&").replace(bC,"+")}}),f.extend({active:0,lastModified:{},etag:{}});var cc=f.now(),cd=/(\=)\?(&|$)|\?\?/i;f.ajaxSetup({jsonp:"callback",jsonpCallback:function(){return f.expando+"_"+cc++}}),f.ajaxPrefilter("json jsonp",function(b,c,d){var e=typeof b.data=="string"&&/^application\/x\-www\-form\-urlencoded/.test(b.contentType);if(b.dataTypes[0]==="jsonp"||b.jsonp!==!1&&(cd.test(b.url)||e&&cd.test(b.data))){var g,h=b.jsonpCallback=f.isFunction(b.jsonpCallback)?b.jsonpCallback():b.jsonpCallback,i=a[h],j=b.url,k=b.data,l="$1"+h+"$2";b.jsonp!==!1&&(j=j.replace(cd,l),b.url===j&&(e&&(k=k.replace(cd,l)),b.data===k&&(j+=(/\?/.test(j)?"&":"?")+b.jsonp+"="+h))),b.url=j,b.data=k,a[h]=function(a){g=[a]},d.always(function(){a[h]=i,g&&f.isFunction(i)&&a[h](g[0])}),b.converters["script json"]=function(){g||f.error(h+" was not called");return g[0]},b.dataTypes[0]="json";return"script"}}),f.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/javascript|ecmascript/},converters:{"text script":function(a){f.globalEval(a);return a}}}),f.ajaxPrefilter("script",function(a){a.cache===b&&(a.cache=!1),a.crossDomain&&(a.type="GET",a.global=!1)}),f.ajaxTransport("script",function(a){if(a.crossDomain){var d,e=c.head||c.getElementsByTagName("head")[0]||c.documentElement;return{send:function(f,g){d=c.createElement("script"),d.async="async",a.scriptCharset&&(d.charset=a.scriptCharset),d.src=a.url,d.onload=d.onreadystatechange=function(a,c){if(c||!d.readyState||/loaded|complete/.test(d.readyState))d.onload=d.onreadystatechange=null,e&&d.parentNode&&e.removeChild(d),d=b,c||g(200,"success")},e.insertBefore(d,e.firstChild)},abort:function(){d&&d.onload(0,1)}}}});var ce=a.ActiveXObject?function(){for(var a in cg)cg[a](0,1)}:!1,cf=0,cg;f.ajaxSettings.xhr=a.ActiveXObject?function(){return!this.isLocal&&ch()||ci()}:ch,function(a){f.extend(f.support,{ajax:!!a,cors:!!a&&"withCredentials"in a})}(f.ajaxSettings.xhr()),f.support.ajax&&f.ajaxTransport(function(c){if(!c.crossDomain||f.support.cors){var d;return{send:function(e,g){var h=c.xhr(),i,j;c.username?h.open(c.type,c.url,c.async,c.username,c.password):h.open(c.type,c.url,c.async);if(c.xhrFields)for(j in c.xhrFields)h[j]=c.xhrFields[j];c.mimeType&&h.overrideMimeType&&h.overrideMimeType(c.mimeType),!c.crossDomain&&!e["X-Requested-With"]&&(e["X-Requested-With"]="XMLHttpRequest");try{for(j in e)h.setRequestHeader(j,e[j])}catch(k){}h.send(c.hasContent&&c.data||null),d=function(a,e){var j,k,l,m,n;try{if(d&&(e||h.readyState===4)){d=b,i&&(h.onreadystatechange=f.noop,ce&&delete cg[i]);if(e)h.readyState!==4&&h.abort();else{j=h.status,l=h.getAllResponseHeaders(),m={},n=h.responseXML,n&&n.documentElement&&(m.xml=n);try{m.text=h.responseText}catch(a){}try{k=h.statusText}catch(o){k=""}!j&&c.isLocal&&!c.crossDomain?j=m.text?200:404:j===1223&&(j=204)}}}catch(p){e||g(-1,p)}m&&g(j,k,m,l)},!c.async||h.readyState===4?d():(i=++cf,ce&&(cg||(cg={},f(a).unload(ce)),cg[i]=d),h.onreadystatechange=d)},abort:function(){d&&d(0,1)}}}});var cj={},ck,cl,cm=/^(?:toggle|show|hide)$/,cn=/^([+\-]=)?([\d+.\-]+)([a-z%]*)$/i,co,cp=[["height","marginTop","marginBottom","paddingTop","paddingBottom"],["width","marginLeft","marginRight","paddingLeft","paddingRight"],["opacity"]],cq;f.fn.extend({show:function(a,b,c){var d,e;if(a||a===0)return this.animate(ct("show",3),a,b,c);for(var g=0,h=this.length;g=i.duration+this.startTime){this.now=this.end,this.pos=this.state=1,this.update(),i.animatedProperties[this.prop]=!0;for(b in i.animatedProperties)i.animatedProperties[b]!==!0&&(g=!1);if(g){i.overflow!=null&&!f.support.shrinkWrapBlocks&&f.each(["","X","Y"],function(a,b){h.style["overflow"+b]=i.overflow[a]}),i.hide&&f(h).hide();if(i.hide||i.show)for(b in i.animatedProperties)f.style(h,b,i.orig[b]),f.removeData(h,"fxshow"+b,!0),f.removeData(h,"toggle"+b,!0);d=i.complete,d&&(i.complete=!1,d.call(h))}return!1}i.duration==Infinity?this.now=e:(c=e-this.startTime,this.state=c/i.duration,this.pos=f.easing[i.animatedProperties[this.prop]](this.state,c,0,1,i.duration),this.now=this.start+(this.end-this.start)*this.pos),this.update();return!0}},f.extend(f.fx,{tick:function(){var a,b=f.timers,c=0;for(;c-1,k={},l={},m,n;j?(l=e.position(),m=l.top,n=l.left):(m=parseFloat(h)||0,n=parseFloat(i)||0),f.isFunction(b)&&(b=b.call(a,c,g)),b.top!=null&&(k.top=b.top-g.top+m),b.left!=null&&(k.left=b.left-g.left+n),"using"in b?b.using.call(a,k):e.css(k)}},f.fn.extend({position:function(){if(!this[0])return null;var a=this[0],b=this.offsetParent(),c=this.offset(),d=cx.test(b[0].nodeName)?{top:0,left:0}:b.offset();c.top-=parseFloat(f.css(a,"marginTop"))||0,c.left-=parseFloat(f.css(a,"marginLeft"))||0,d.top+=parseFloat(f.css(b[0],"borderTopWidth"))||0,d.left+=parseFloat(f.css(b[0],"borderLeftWidth"))||0;return{top:c.top-d.top,left:c.left-d.left}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||c.body;while(a&&!cx.test(a.nodeName)&&f.css(a,"position")==="static")a=a.offsetParent;return a})}}),f.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,c){var d=/Y/.test(c);f.fn[a]=function(e){return f.access(this,function(a,e,g){var h=cy(a);if(g===b)return h?c in h?h[c]:f.support.boxModel&&h.document.documentElement[e]||h.document.body[e]:a[e];h?h.scrollTo(d?f(h).scrollLeft():g,d?g:f(h).scrollTop()):a[e]=g},a,e,arguments.length,null)}}),f.each({Height:"height",Width:"width"},function(a,c){var d="client"+a,e="scroll"+a,g="offset"+a;f.fn["inner"+a]=function(){var a=this[0];return a?a.style?parseFloat(f.css(a,c,"padding")):this[c]():null},f.fn["outer"+a]=function(a){var b=this[0];return b?b.style?parseFloat(f.css(b,c,a?"margin":"border")):this[c]():null},f.fn[c]=function(a){return f.access(this,function(a,c,h){var i,j,k,l;if(f.isWindow(a)){i=a.document,j=i.documentElement[d];return f.support.boxModel&&j||i.body&&i.body[d]||j}if(a.nodeType===9){i=a.documentElement;if(i[d]>=i[e])return i[d];return Math.max(a.body[e],i[e],a.body[g],i[g])}if(h===b){k=f.css(a,c),l=parseFloat(k);return f.isNumeric(l)?l:k}f(a).css(c,h)},c,a,arguments.length,null)}}),a.jQuery=a.$=f,typeof define=="function"&&define.amd&&define.amd.jQuery&&define("jquery",[],function(){return f})})(window); -------------------------------------------------------------------------------- /CSS3Learning-master/CSS3动画小设计/CSS3动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 59 | 60 | 61 | 62 |
63 |
64 | 65 |
66 |
67 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /CSS3Learning-master/CSS3动画小设计/READEME.md: -------------------------------------------------------------------------------- 1 | # 刚学到CSS3animation动画这里，所以尝试着用CSS3动画新特性做一些效果 2 | 3 | ## 感觉确实节省了许多js代码，对于没有事件或者交互的轮播图 4 | 5 | 但是感觉这个并没有什么卵用，没有交互没有事件，你玩个锤子呀 6 | 现在感觉自己在这里没有掌握好的就是`animation-timing-function`里的`step`函数 7 | 这个一会自己再查查资料 8 | 9 | ## 看看了教程，好像CSS3快要学完了，加油 10 | 11 | ## 每日一骚话 12 | 13 | 看不见的颜色，是否叫做彩虹 14 | 摸不到的拥抱，是否叫做微风 15 | 16 | ## 一下就是传说中的更新线 17 | 18 | ============================================================== 19 | 20 | ## 关于开机动画(2D)的说明 21 | 22 | -我发现火狐浏览器对于移动设备似乎没有机型的默认Responsive，这个感觉真的难受 23 | 所以，该页面我是在是Chorme浏览器下调试的，机智如我，O(∩_∩)O哈哈~ 24 | Chorme还是强呀 25 | -过会可能还会做一个开机动画(3D)版！ 26 | 27 | ## 开机动画(3D)版出来了呀 28 | 29 | 这几天确实有点颓废了，真的一天不写代码就浑身难受你看，我这不就难受了三天吗，(滑稽练.jpg) 30 | 不过，还好，又来到了我那个令人神往的图书馆，完成了这极其简单的3D版的开机动画 31 | 代码真的是要每天敲呀，讲真，我三天没敲，今天再敲的时候，真的好多东西都忘了 32 | 甚至，我笔记本的键盘都不认识我了，不闲谈了，说一下重点 33 | 3D版本的开机动画基本知识都一样，就是在这里主要是复习了一些js的基本语法 34 | 主要有一下几点需要注意的： 35 | -数组的拼接，即concat函数的使用 36 | -js中关于img对象的使用 37 | -对象加载完成事件(onload)的复习 38 | -还有就是关于服务器的请求啥，什么本地服务器啥的，我是真的一点都不懂呀，难受 39 | -暂时就这么多吧 40 | 41 | ## 关于我的一个内心的小小的问题 42 | 43 | 你说安卓的底层是不是用css来渲染页面的，这个真的很好奇，因为没有学过安卓，所以不知道到底是不是 44 | 有没有知道的小伙伴可以告诉我呢? -------------------------------------------------------------------------------- /CSS3Learning-master/CSS3动画小设计/img/timg.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/CSS3动画小设计/img/timg.jpeg -------------------------------------------------------------------------------- /CSS3Learning-master/CSS3动画小设计/开机动画(2D).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 47 | 48 | 49 |
50 |
51 | 小 52 | 控 53 | 不 54 | 要 55 | 放 56 | 弃 57 | 呀 58 | ↖(^ω^)↗ 59 |
60 |
61 | 79 | 80 | -------------------------------------------------------------------------------- /CSS3Learning-master/README.md: -------------------------------------------------------------------------------- 1 | # CSS3Learning 2 | 终究还是入了前端的坑，最近在学习CSS3的知识，分享一下CSS3里一些有趣的小Demo 3 | -------------------------------------------------------------------------------- /CSS3Learning-master/动态时钟/READEME.md: -------------------------------------------------------------------------------- 1 | # 利用CSS3特性写的一个动态时钟 2 | Also,一般的html页面是没有style标签的，一般都是引入的外部样式表(link标签)，所以如果用到了style标签的东西， 3 | 你可以自己创建一个style标签，利用doucument.head.append方法将其加入html页面 4 | 然后就可以在自己new的style标签里为所欲为了 5 | 目前，还存在的一个问题是，时针和分针变化都是不连续的，或者说肉眼看起来是不连续的，都是突然从一个格子跳到另一个格子 6 | 就是比如，现在是上午八点半，时针应该指向8点钟刻度和九点钟刻度中间的位置，但是我现在做得这个并非如此 7 | As we all konw ，生活中的时钟看起来都是连续的，变化并没有那么突兀，However，I don't have a good idea to solve it 8 | So, if you have any idea , please contact me quickly! 9 | My E-mail: littlecontrol@qq.com 10 | Everying Above -------------------------------------------------------------------------------- /CSS3Learning-master/动态时钟/动态时钟.html: -------------------------------------------------------------------------------- 1 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 88 | 89 | 90 |
91 |
92 |
93 |
    94 |
    95 |
    96 |
    97 |
    98 |
    99 |
    100 | 131 | 132 | -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/READEME.md: -------------------------------------------------------------------------------- 1 | # 利用CSS3实现的一个扇形导航 2 | - click类型的意思是菜单展开后，点击对应的图标会有一个效果 3 | - hover类型则是鼠标移入图标就会出现对应的效果 4 | - 目前只是实现了一个动画效果，对应的功能按钮冰未实现 5 | ## 图片来源：[阿里巴巴矢量图标库](https://www.iconfont.cn/ "阿里巴巴矢量图标库") 6 | -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/close.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/heart.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/left.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/plus.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/reload.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/img/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/click类型的/img/setting.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/click类型的/扇形导航.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 很棒的一个小东西 9 | 10 | 11 | 47 | 48 | 49 | 61 | 121 | 122 | -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/close.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/heart.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/left.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/plus.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/reload.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/reload.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/setting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/有趣的扇形导航栏/hover类型的/img/setting.png -------------------------------------------------------------------------------- /CSS3Learning-master/有趣的扇形导航栏/hover类型的/扇形导航.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 很棒的一个小东西 9 | 10 | 11 | 53 | 54 | 55 | 67 | 132 | 133 | -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/REAEME.md: -------------------------------------------------------------------------------- 1 | # 一个简单的模仿淘宝网的移动端的导航页面 2 | 3 | 主要是是练习一下flex的等分布局 4 | 我今天才发现JS控制HTML的伪元素有点麻烦 5 | 以至于我现在都不会，难受 6 | 7 | ## 过几天我再写一个关于flex布局的博客吧，全当复习了 8 | 9 | 李小控的个人博客( -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/1.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/10.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/2.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/3.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/4.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/5.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/6.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/7.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/8.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/CSS3Learning-master/淘宝移动端导航/img/9.png -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/成品.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 107 | 108 | 109 | 110 |
    111 |
    112 |
    1
    113 |
    2
    114 |
    3
    115 |
    4
    116 |
    5
    117 |
    118 |
    119 |
    6
    120 |
    7
    121 |
    8
    122 |
    9
    123 |
    10
    124 |
    125 |
    126 | 143 | 144 | 145 | -------------------------------------------------------------------------------- /CSS3Learning-master/淘宝移动端导航/残次品.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Document 9 | 38 | 39 | 40 | 41 |
    42 |
    43 |
    1     44 |
    2     45 |
    3     46 |
    4     47 |
    5     48 |
    49 |
    50 |
    6     51 |
    7     52 |
    8     53 |
    9     54 |
    10     55 |
    56 |
    57 | 58 | 59 | -------------------------------------------------------------------------------- /CSS3Learning-master/立方体/READEME.md: -------------------------------------------------------------------------------- 1 | # 利用CSS3的舞台效果（transform-style）实现的一个立方体（色子）的效果 2 | 3 | ## 目前存在的一个问题是，立方体转动过程中会出现一些线条问题，应该是元素的分层的边界，然而目前还没有想到好的办法解决 4 | ## 切结，承载六个面的div的background-color一定要是透明的，否则可能会出现一些奇奇怪怪的效果 5 | 最新研究效果显示，承载六个面的div的bg-color可以是任意的， 6 | 因为我给该div也设置了transform-style属性，导致该div也有了层级，所以立方体不能完整显示， 7 | 把该div的舞台效果注释掉就可以了 8 | ## 终于把三棱柱做出来了，三棱柱是多棱柱的基础，经过我不懈自闭，终于把多棱柱也写了出来 9 | 这里简单谈一下中间踩到的一些坑 10 | -记住，Math函数库的三角函数都是以弧度为单位的，切记 11 | -搞清楚每个transform-origin发挥作用的位置， 12 | 比如这里面每个例子中#box2的transform-origin和#box2 > div中的transform-origin之前的区别与联系 13 | -记住，perspective作用于后代元素，而transform-style只作用于子元素 14 | -最外层的父元素，或者说我做的demo中的每个#box1最好不要设置transform-style 15 | -在最后的多棱柱生成函数中，个人用style标签生成innerHTML的方式来设置样式感觉还是很麻烦，至于性能问题，能力有限 16 | 也不知道给怎么评估，感觉还是用修改style的内敛样式比较方便一点 17 | -感觉，数学知识和空间想象能力还是要有一点 18 | ## 目前多棱柱还是存在一些问题 19 | -最直接的问题是，页面首次加载是会有一次较大的变形，感觉是景深（perspective）的值出了问题， 20 | 但是也不确定，所以也没有什么好的解决办法 21 | -还有一个一困扰我很久的问题，因为前端这方面一直是自学，就是关于查询HTML DOM树的问题， 22 | 我看视频时，有的老师一直使用getElementByID之类的，而有的老师则是一种用querySelector一类 23 | 所以，也一直很纠结到底哪个好，各有什么优缺点 24 | # 最后一句话共勉 25 | 努力真的是因为： 26 | 1、远方很远 27 | 2、喜欢的人很优秀 28 | 3、好吃的很贵呀 29 | -------------------------------------------------------------------------------- /CSS3Learning-master/立方体/三棱柱.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 62 | 63 | 64 |
    65 |
    66 |
    1
    67 |
    2
    68 |
    3
    69 |
    70 |
    71 | 72 | -------------------------------------------------------------------------------- /CSS3Learning-master/立方体/多棱柱.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 47 | 48 | 49 |
    50 |
    51 | 52 |
    53 |
    54 | 84 | 85 | -------------------------------------------------------------------------------- /CSS3Learning-master/立方体/立方体.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 88 | 89 | 90 |
    91 |
    92 |
    前
    93 |
    后
    94 |
    左
    95 |
    右
    96 |
    上
    97 |
    下
    98 |
    99 |
    100 | 101 | -------------------------------------------------------------------------------- /CSS3Learning-master/立方体/立方体改进.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 82 | 83 | 84 |
    85 |
    86 |
    上
    87 |
    下
    88 |
    左
    89 |
    右
    90 |
    前
    91 |
    后
    92 |
    93 |
    94 | 95 | -------------------------------------------------------------------------------- /Demo-master/2048/2048.css: -------------------------------------------------------------------------------- 1 | /* header及header内部样式设置 */ 2 | header{ 3 | display: block; 4 | margin: 0 auto; 5 | width: 100%; 6 | text-align: center; 7 | } 8 | h1{ 9 | font-family: Arial; 10 | font-size: 40px; 11 | font-weight: bold; 12 | } 13 | header #newGameButton{ 14 | display: block; 15 | margin: 20px auto; 16 | 17 | width: 100px; 18 | padding: 10px; 19 | background-color: #8f7a66; 20 | 21 | font-family: Arial; 22 | color: white; 23 | 24 | border-radius: 10px; 25 | 26 | text-decoration: none; 27 | } 28 | header #newGameButton:hover{ 29 | background-color: #9f8b77; 30 | } 31 | p{ 32 | font-family: Arial; 33 | font-size: 25px; 34 | margin: 20px auto; 35 | } 36 | 37 | /*gridContain及gridContainer里的元素的样式设计*/ 38 | #grid-container{ 39 | width: 460px; 40 | height: 460px; 41 | padding: 20px; 42 | 43 | margin: 50px auto; 44 | background-color: #bbada0; 45 | 46 | border-radius: 10px; 47 | position: relative; 48 | } 49 | .grid-cell{ 50 | height: 100px; 51 | width: 100px; 52 | border-radius: 6px; 53 | background-color: #ccc0b3; 54 | 55 | position: absolute; 56 | } 57 | .number-cell{ 58 | border-radius: 6px; 59 | 60 | font-family: Arial; 61 | font-weight: bold; 62 | font-size: 50px; 63 | line-height: 100px; 64 | text-align: center; 65 | 66 | position: absolute; 67 | } -------------------------------------------------------------------------------- /Demo-master/2048/2048.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 2048副本 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |

    2048

    18 | New Game 19 |

    score:0

    20 |
    21 | 22 |
    23 |
    24 |
    25 |
    26 |
    27 | 28 |
    29 |
    30 |
    31 |
    32 | 33 |
    34 |
    35 |
    36 |
    37 | 38 |
    39 |
    40 |
    41 |
    42 |
    43 | 44 | -------------------------------------------------------------------------------- /Demo-master/2048/main2048.js: -------------------------------------------------------------------------------- 1 | //游戏数据 16个格子 分数 2 | var board = new Array(); 3 | var score = 0; 4 | var hasConflicted = new Array(); 5 | 6 | var startx = 0; 7 | var starty = 0; 8 | var endx = 0; 9 | var endy = 0; 10 | 11 | $(document).ready(function() { 12 | prepareForMobile(); 13 | newgame(); 14 | }); 15 | 16 | function prepareForMobile(){ 17 | 18 | if (documentWidth > 500) { 19 | gridContainerWidth = 500; 20 | cellSpace = 20; 21 | cellSideLength = 100; 22 | } 23 | 24 | $('#grid-container').css('width',gridContainerWidth - 2*cellSpace); 25 | $('#grid-container').css('height',gridContainerWidth - 2*cellSpace); 26 | $('#grid-container').css('padding',cellSpace); 27 | $('#grid-container').css('border-radius',0.02*gridContainerWidth); 28 | 29 | $('.grid-cell').css('width',cellSideLength); 30 | $('.grid-cell').css('height',cellSideLength); 31 | $('.grid-cell').css('border-radius',0.02*cellSideLength); 32 | 33 | } 34 | 35 | function newgame(){ 36 | //初始化 37 | init(); 38 | //随机地在两个格子里生成数字 39 | generateOneNumber(); 40 | generateOneNumber(); 41 | } 42 | 43 | function init(){ 44 | 45 | //设置小格子的位置 46 | for (var i = 0; i < 4; i++) { 47 | for (var j = 0; j < 4; j++) { 48 | //通过ID获取每个小格子 49 | var gridCell = $("#grid-cell-"+i+"-"+j); 50 | //获取每个格子的坐标数据 51 | gridCell.css("top",getPosTop(i,j)); 52 | gridCell.css("left",getPosLeft(i,j)); 53 | } 54 | } 55 | 56 | //初始化board 57 | for (var i = 0; i < 4; i++) { 58 | //将board变成二维数组 59 | board[i] = new Array(); 60 | hasConflicted[i] = new Array(); 61 | //初始化board每个值 62 | for (var j = 0; j < 4; j++) { 63 | board[i][j] = 0; 64 | hasConflicted[i][j] = false; 65 | } 66 | } 67 | 68 | //显示并设定munber-cell里的元素 69 | updateBoardView(); 70 | 71 | //初始化score值 72 | score = 0; 73 | updateScore(score); 74 | } 75 | 76 | function updateBoardView(){ 77 | 78 | $(".number-cell").remove(); 79 | for (var i = 0; i < 4; i++) { 80 | for (var j = 0; j < 4; j++) { 81 | $("#grid-container").append('
    '); 82 | var theNumberCell = $("#number-cell-"+i+"-"+j); 83 | 84 | if (board[i][j] == 0) { 85 | theNumberCell.css('width','0px'); 86 | theNumberCell.css('height','0px'); 87 | theNumberCell.css('top',getPosTop(i,j)+0.5*cellSideLength); 88 | theNumberCell.css('left',getPosLeft(i,j)+0.5*cellSideLength); 89 | }else { 90 | theNumberCell.css('width',cellSideLength); 91 | theNumberCell.css('height',cellSideLength); 92 | theNumberCell.css('top',getPosTop(i,j)); 93 | theNumberCell.css('left',getPosLeft(i,j)); 94 | theNumberCell.css('background-color',getNumberBackgroundColor(board[i][j])); 95 | theNumberCell.css('color',getNumberColor(board[i][j])); 96 | theNumberCell.text(board[i][j]); 97 | } 98 | 99 | hasConflicted[i][j] = false; 100 | 101 | } 102 | } 103 | 104 | $('.number-cell').css('line-height',cellSideLength + 'px'); 105 | $('.number-cell').css('font-size',0.6*cellSideLength + 'px'); 106 | 107 | } 108 | 109 | function generateOneNumber(){ 110 | 111 | if (nospace(board)) { 112 | return false; 113 | } 114 | 115 | //随机一个位置 116 | var randx = parseInt(Math.floor(Math.random() * 4)); 117 | var randy = parseInt(Math.floor(Math.random() * 4)); 118 | var time = 0; 119 | 120 | while (time <50) { 121 | if (board[randx][randy] == 0) { 122 | break; 123 | } 124 | randx = parseInt(Math.floor(Math.random() * 4)); 125 | randy = parseInt(Math.floor(Math.random() * 4)); 126 | 127 | time ++; 128 | } 129 | if (time == 50) { 130 | for (var i = 0; i < 4; i++) { 131 | for (var j = 0; j < 4; j++) { 132 | randx = i; 133 | randy = j; 134 | } 135 | } 136 | } 137 | 138 | //随机一个数字 139 | var randNumber = Math.random() < 0.5 ? 2 :4; 140 | //在随机位置上显示数字 141 | board[randx][randy] = randNumber; 142 | showNumberWithAnimation(randx,randy,randNumber); 143 | 144 | return true; 145 | } 146 | 147 | $(document).keydown(function(event) { 148 | 149 | switch(event.keyCode) { 150 | case 37://left 151 | event.preventDefault(); 152 | if (moveLeft()) { 153 | setTimeout(generateOneNumber(), 210); 154 | setTimeout(isgameover(), 300); 155 | } 156 | break; 157 | case 38://up 158 | if (moveUp()) { 159 | event.preventDefault(); 160 | setTimeout(generateOneNumber(), 210); 161 | setTimeout(isgameover(), 300); 162 | } 163 | break; 164 | case 39://right 165 | event.preventDefault(); 166 | if (moveRight()) { 167 | setTimeout(generateOneNumber(), 210); 168 | setTimeout(isgameover(), 300); 169 | } 170 | break; 171 | case 40://down 172 | event.preventDefault(); 173 | if (moveDown()) { 174 | setTimeout(generateOneNumber(), 210); 175 | setTimeout(isgameover(), 300); 176 | } 177 | break; 178 | default://default 179 | 180 | break; 181 | } 182 | }); 183 | 184 | document.addEventListener('touchstart', function (event) { 185 | 186 | startx = event.touches[0].pageX; 187 | starty = event.touches[0].pageY; 188 | }) 189 | 190 | document.addEventListener('touchmove', function (event) { 191 | event.preventDefault(); 192 | }) 193 | 194 | document.addEventListener('touchend', function (event) { 195 | 196 | endx = event.changedTouches[0].pageX; 197 | endy = event.changedTouches[0].pageY; 198 | 199 | var deltax = endx - startx; 200 | var deltay = endy - starty; 201 | 202 | if (Math.abs(deltax) < 0.3*documentWidth && Math.abs(deltay) < 0.3*documentWidth) { 203 | return; 204 | } 205 | 206 | //在x轴移动 207 | if (Math.abs(deltax) >= Math.abs(deltay)) { 208 | 209 | if (deltax > 0) { 210 | //move right 211 | if (moveRight()) { 212 | setTimeout(generateOneNumber(), 210); 213 | setTimeout(isgameover(), 300); 214 | } 215 | }else{ 216 | //move left 217 | if (moveLeft()) { 218 | setTimeout(generateOneNumber(), 210); 219 | setTimeout(isgameover(), 300); 220 | } 221 | } 222 | } 223 | //在y轴上移动 224 | else{ 225 | 226 | if (deltay > 0) { 227 | //move down 228 | if (moveDown()) { 229 | setTimeout(generateOneNumber(), 210); 230 | setTimeout(isgameover(), 300); 231 | } 232 | }else{ 233 | //move up 234 | if (moveUp()) { 235 | setTimeout(generateOneNumber(), 210); 236 | setTimeout(isgameover(), 300); 237 | } 238 | } 239 | } 240 | }) 241 | 242 | function isgameover(){ 243 | if (nospace(board) && nomove()) { 244 | gameover(); 245 | } 246 | } 247 | 248 | function gameover(){ 249 | alert('Game Over'); 250 | } 251 | 252 | function moveLeft(){ 253 | if (!canMoveLeft(board)) { 254 | return false; 255 | } 256 | //moveLeft 257 | //落脚位置是否为空 落脚位置的数字和待判定元素数字相等 移动路径中是否有障碍物 258 | for (var i = 0; i < 4; i++) { 259 | for(var j = 1; j < 4; j++){ 260 | if (board[i][j] != 0) { 261 | for(var k = 0;k < j; k++){ 262 | if (board[i][k] == 0 && noBlockLeft(i,j,k,board)) { 263 | 264 | //move 265 | showMoveAnimation(i,j,i,k); 266 | board[i][k] = board[i][j]; 267 | board[i][j] = 0; 268 | 269 | continue; 270 | }else if (board[i][k] == board[i][j] && noBlockLeft(i,j,k,board) && !hasConflicted[i][k]) { 271 | 272 | //move 273 | showMoveAnimation(i,j,i,k); 274 | //add 275 | 276 | board[i][k] += board[i][j]; 277 | board[i][j] = 0; 278 | 279 | score += board[i][k]; 280 | updateScore(score); 281 | 282 | hasConflicted[i][k] = true; 283 | 284 | continue; 285 | } 286 | } 287 | } 288 | } 289 | } 290 | setTimeout('updateBoardView()', 200); 291 | return true; 292 | } 293 | 294 | function moveRight(){ 295 | if (!canMoveRight(board)) { 296 | return false; 297 | } 298 | //moveRight 299 | //落脚位置是否为空 落脚位置的数字和待判定元素数字相等 移动路径中是否有障碍物 300 | for (var i = 0; i < 4; i++) { 301 | for(var j = 2; j >= 0; j--){ 302 | if (board[i][j] != 0) { 303 | for(var k = 3;k > j; k--){ 304 | if (board[i][k] == 0 && noBlockRight(i,j,k,board)) { 305 | 306 | //move 307 | showMoveAnimation(i,j,i,k); 308 | board[i][k] = board[i][j]; 309 | board[i][j] = 0; 310 | 311 | continue; 312 | }else if (board[i][k] == board[i][j] && noBlockRight(i,j,k,board) && !hasConflicted[i][k]) { 313 | 314 | //move 315 | showMoveAnimation(i,j,i,k); 316 | //add 317 | 318 | board[i][k] += board[i][j]; 319 | board[i][j] = 0; 320 | 321 | score += board[i][k]; 322 | updateScore(score); 323 | 324 | hasConflicted[i][k] = true; 325 | 326 | continue; 327 | } 328 | } 329 | } 330 | } 331 | } 332 | setTimeout('updateBoardView()', 200); 333 | return true; 334 | } 335 | 336 | function moveUp(){ 337 | if (!canMoveUp(board)) { 338 | return false; 339 | } 340 | //moveUp 341 | //落脚位置是否为空 落脚位置的数字和待判定元素数字相等 移动路径中是否有障碍物 342 | for (var i = 1; i < 4; i++) { 343 | for(var j = 0; j < 4; j++){ 344 | if (board[i][j] != 0) { 345 | for(var k = 0;k < i; k++){ 346 | if (board[k][j] == 0 && noBlockUp(i,k,j,board)) { 347 | 348 | //move 349 | showMoveAnimation(i,j,k,j); 350 | board[k][j] = board[i][j]; 351 | board[i][j] = 0; 352 | 353 | continue; 354 | }else if (board[k][j] == board[i][j] && noBlockUp(i,k,j,board) && !hasConflicted[k][j]) { 355 | 356 | //move 357 | showMoveAnimation(i,j,k,j); 358 | //add 359 | 360 | board[k][j] += board[i][j]; 361 | board[i][j] = 0; 362 | 363 | score += board[k][j]; 364 | updateScore(score); 365 | 366 | hasConflicted[k][j] = true; 367 | 368 | continue; 369 | } 370 | } 371 | } 372 | } 373 | } 374 | setTimeout('updateBoardView()', 200); 375 | return true; 376 | } 377 | 378 | function moveDown(){ 379 | if (!canMoveDown(board)) { 380 | return false; 381 | } 382 | //moveDown 383 | //落脚位置是否为空 落脚位置的数字和待判定元素数字相等 移动路径中是否有障碍物 384 | for (var i = 2; i >= 0; i--) { 385 | for(var j = 0; j < 4; j++){ 386 | if (board[i][j] != 0) { 387 | for(var k = 3;k > i; k--){ 388 | if (board[k][j] == 0 && noBlockDown(i,k,j,board)) { 389 | 390 | //move 391 | showMoveAnimation(i,j,k,j); 392 | board[k][j] = board[i][j]; 393 | board[i][j] = 0; 394 | 395 | continue; 396 | }else if (board[k][j] == board[i][j] && noBlockDown(i,k,j,board) && !hasConflicted[k][j]) { 397 | 398 | //move 399 | showMoveAnimation(i,j,k,j); 400 | //add 401 | 402 | board[k][j] += board[i][j]; 403 | board[i][j] = 0; 404 | 405 | score += board[k][j]; 406 | updateScore(score); 407 | 408 | hasConflicted[k][j] = true; 409 | 410 | continue; 411 | } 412 | } 413 | } 414 | } 415 | } 416 | setTimeout('updateBoardView()', 200); 417 | return true; 418 | } -------------------------------------------------------------------------------- /Demo-master/2048/read me: -------------------------------------------------------------------------------- 1 | read me 2 | 3 | 采取面向过程的开发方式 4 | 5 | 1.游戏构架：MVC。 6 | M 模型层 V 视图层 C 控制层 7 | M:游戏数据；V：UI-HTML/CSS；C：游戏主逻辑-js/jquery; 8 | 9 | UI:2048.CSS 2048.html 10 | 主逻辑：main2048.js 11 | 动画效果逻辑：showaanimation2048.js 12 | 底层支撑逻辑：support.js 13 | 14 | 2.构建页面元素 15 | 16 | 3.游戏逻辑： 17 | var board 二维数组------updataBoardView()-------number-cell 18 | 19 | 4.页面初始化过程： 20 | 21 | 5.随机数动画：animate() 22 | 23 | 6.游戏循环：基于时间 或 基于玩家响应 24 | 25 | 7.基于玩家响应的循环 26 | 27 | 8.交互细节 28 | 29 | 9.gameover部分 30 | 31 | 32 | Web Applications Native Applications 33 | 运行在服务器上 通过App Store下载 34 | 通过浏览器执行 直接运行在移动设备上 35 | 使用前端技术： 使用技术： 36 | HTML Objective-C(ios) 37 | CSS Java(Android) 38 | Javascript 39 | 40 | 发布Web Applications 41 | 使用Dropbox 42 | 限制： 43 | 静态网站 44 | 速度稍慢 45 | 域名不宜记忆 -------------------------------------------------------------------------------- /Demo-master/2048/showanimation.js: -------------------------------------------------------------------------------- 1 | function showNumberWithAnimation(i,j,randNumber){ 2 | 3 | var numberCell = $("#number-cell-"+i+"-"+j); 4 | 5 | numberCell.css('background-color',getNumberBackgroundColor(randNumber)); 6 | numberCell.css('color',getNumberColor(randNumber)); 7 | numberCell.text(randNumber); 8 | 9 | numberCell.animate({ 10 | width:cellSideLength, 11 | height:cellSideLength, 12 | top:getPosTop(i,j), 13 | left:getPosLeft(i,j) 14 | },50); 15 | 16 | } 17 | 18 | function showMoveAnimation(fromx,fromy,tox,toy){ 19 | var numberCell = $('#number-cell-'+fromx+'-'+fromy); 20 | numberCell.animate({ 21 | top:getPosTop(tox,toy), 22 | left:getPosLeft(tox,toy) 23 | }, 200); 24 | } 25 | function updateScore(score){ 26 | $('#score').text(score); 27 | } -------------------------------------------------------------------------------- /Demo-master/2048/support.js: -------------------------------------------------------------------------------- 1 | documentWidth = window.screen.availWidth; 2 | gridContainerWidth = 0.92*documentWidth; 3 | cellSideLength = 0.18*documentWidth; 4 | cellSpace = 0.04*documentWidth; 5 | 6 | //获得每个格子的坐标数据 7 | function getPosTop(i,j){ 8 | return cellSpace + i*(cellSpace+cellSideLength); 9 | } 10 | function getPosLeft(i,j){ 11 | return cellSpace + j*(cellSpace+cellSideLength); 12 | } 13 | //改变数字格的颜色 14 | function getNumberBackgroundColor(number){ 15 | switch(number) { 16 | case 2:return '#eee4da'; break; 17 | case 4:return '#ede0c8'; break; 18 | case 8:return '#f2b179'; break; 19 | case 16:return '#f59563'; break; 20 | case 32:return '#f67c5f'; break; 21 | case 64:return '#f65e3b'; break; 22 | case 128:return '#edcc61'; break; 23 | case 256:return '#9c0'; break; 24 | case 512:return '33b5e5'; break; 25 | case 1024:return '#09c'; break; 26 | case 2048:return '#a6c'; break; 27 | case 4064:return '#93c'; break; 28 | } 29 | return "black"; 30 | } 31 | function getNumberColor(number){ 32 | if (number <= 4) { 33 | return "#776e65"; 34 | } 35 | return "white"; 36 | } 37 | 38 | function nospace(board){ 39 | for (var i = 0; i < 4; i++) { 40 | for (var j = 0; j < 4; j++) { 41 | if (board[i][j] == 0) { 42 | return false; 43 | } 44 | } 45 | } 46 | return true; 47 | } 48 | //左边没有数字 或 与左边数字相等 49 | function canMoveLeft(board){ 50 | for (var i = 0; i < 4; i++) { 51 | for(var j = 1; j < 4; j++){ 52 | if (board[i][j] != 0) { 53 | if (board[i][j-1] == 0 || board[i][j-1] == board[i][j]) { 54 | return true; 55 | } 56 | } 57 | } 58 | } 59 | return false; 60 | } 61 | function canMoveRight(board){ 62 | for (var i = 0; i < 4; i++) { 63 | for(var j = 2; j <= 2; j--){ 64 | if (board[i][j] != 0) { 65 | if (board[i][j+1] == 0 || board[i][j+1] == board[i][j]) { 66 | return true; 67 | } 68 | } 69 | } 70 | } 71 | return false; 72 | } 73 | function canMoveUp(board){ 74 | for (var i = 1; i < 4; i++) { 75 | for(var j = 0; j < 4; j++){ 76 | if (board[i][j] != 0) { 77 | if (board[i-1][j] == 0 || board[i-1][j] == board[i][j]) { 78 | return true; 79 | } 80 | } 81 | } 82 | } 83 | return false; 84 | } 85 | function canMoveDown(board){ 86 | for (var i = 0; i < 3; i++) { 87 | for(var j = 0; j < 4; j++){ 88 | if (board[i][j] != 0) { 89 | if (board[i+1][j] == 0 || board[i+1][j] == board[i][j]) { 90 | return true; 91 | } 92 | } 93 | } 94 | } 95 | return false; 96 | } 97 | 98 | function noBlockLeft(row,col1,col2,board){ 99 | for (var i = col1-1 ; i > col2; i--) { 100 | if (board[row][i] != 0) { 101 | return false; 102 | } 103 | } 104 | return true; 105 | } 106 | 107 | function noBlockRight(row,col1,col2,board){ 108 | for (var i = col1+1 ; i < col2; i++) { 109 | if (board[row][i] != 0) { 110 | return false; 111 | } 112 | } 113 | return true; 114 | } 115 | 116 | function noBlockUp(row1,row2,col,board){ 117 | for (var i = row1-1 ; i > row2; i--) { 118 | if (board[i][col] != 0) { 119 | return false; 120 | } 121 | } 122 | return true; 123 | } 124 | 125 | function noBlockDown(row1,row2,col,board){ 126 | for (var i = row1+1 ; i < row2; i++) { 127 | if (board[i][col] != 0) { 128 | return false; 129 | } 130 | } 131 | return true; 132 | } 133 | 134 | function nomove(){ 135 | if (canMoveLeft(board) || canMoveRight(board) || canMoveUp(board) || canMoveDown(board)) { 136 | return false; 137 | } 138 | return true; 139 | } 140 | -------------------------------------------------------------------------------- /FunnyCss-master/ParallaxScrolling01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 43 | 44 | 45 | 46 |
    Header
    47 |
    IMG1
    48 |
    Content1
    49 |
    IMG2
    50 |
    Content2
    51 |
    IMG3
    52 |
    Footer
    53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /FunnyCss-master/ParallaxScrolling02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 32 | 33 | 34 |
    35 |
    SECTION
    36 |
    SECTION
    37 |
    SECTION
    38 |
    39 | 40 | -------------------------------------------------------------------------------- /FunnyCss-master/README.md: -------------------------------------------------------------------------------- 1 | # FunnyCss 2 | 3 | ## 一些有趣的 css 小 demo (✪ω✪) 4 | 5 | - [几行代码实现打字效果](https://github.com/YaliixxG/FunnyCss/blob/master/typing.html) 6 | 7 | - [视差01：背景图固定，视口滚动效果](https://github.com/YaliixxG/FunnyCss/blob/master/ParallaxScrolling01.html) 8 | 9 | - [视差02：3D元素视差效果](https://github.com/YaliixxG/FunnyCss/blob/master/ParallaxScrolling02.html) 10 | -------------------------------------------------------------------------------- /FunnyCss-master/typing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 有趣的打字效果 9 | 30 | 31 | 32 | 33 |

    只需要几行代码就可以实现简单的打字效果哦~(σﾟ∀ﾟ)σ..:*☆哎哟不错哦

    34 | 35 | 36 | -------------------------------------------------------------------------------- /canvas-master/README.md: -------------------------------------------------------------------------------- 1 |

    canvas倒计时效果

    2 | 预览效果：https://htmlpreview.github.io/?https://github.com/geekape/canvas/blob/master/%E5%80%92%E8%AE%A1%E6%97%B6%E7%82%AB%E9%85%B7%E6%97%B6%E9%92%9F/index.html 3 | 4 | -------------------------------------------------------------------------------- /canvas-master/倒计时炫酷时钟/digit.js: -------------------------------------------------------------------------------- 1 | digit = 2 | [ 3 | [ 4 | [0,0,1,1,1,0,0], 5 | [0,1,1,0,1,1,0], 6 | [1,1,0,0,0,1,1], 7 | [1,1,0,0,0,1,1], 8 | [1,1,0,0,0,1,1], 9 | [1,1,0,0,0,1,1], 10 | [1,1,0,0,0,1,1], 11 | [1,1,0,0,0,1,1], 12 | [0,1,1,0,1,1,0], 13 | [0,0,1,1,1,0,0] 14 | ],//0 15 | [ 16 | [0,0,0,1,1,0,0], 17 | [0,1,1,1,1,0,0], 18 | [0,0,0,1,1,0,0], 19 | [0,0,0,1,1,0,0], 20 | [0,0,0,1,1,0,0], 21 | [0,0,0,1,1,0,0], 22 | [0,0,0,1,1,0,0], 23 | [0,0,0,1,1,0,0], 24 | [0,0,0,1,1,0,0], 25 | [1,1,1,1,1,1,1] 26 | ],//1 27 | [ 28 | [0,1,1,1,1,1,0], 29 | [1,1,0,0,0,1,1], 30 | [0,0,0,0,0,1,1], 31 | [0,0,0,0,1,1,0], 32 | [0,0,0,1,1,0,0], 33 | [0,0,1,1,0,0,0], 34 | [0,1,1,0,0,0,0], 35 | [1,1,0,0,0,0,0], 36 | [1,1,0,0,0,1,1], 37 | [1,1,1,1,1,1,1] 38 | ],//2 39 | [ 40 | [1,1,1,1,1,1,1], 41 | [0,0,0,0,0,1,1], 42 | [0,0,0,0,1,1,0], 43 | [0,0,0,1,1,0,0], 44 | [0,0,1,1,1,0,0], 45 | [0,0,0,0,1,1,0], 46 | [0,0,0,0,0,1,1], 47 | [0,0,0,0,0,1,1], 48 | [1,1,0,0,0,1,1], 49 | [0,1,1,1,1,1,0] 50 | ],//3 51 | [ 52 | [0,0,0,0,1,1,0], 53 | [0,0,0,1,1,1,0], 54 | [0,0,1,1,1,1,0], 55 | [0,1,1,0,1,1,0], 56 | [1,1,0,0,1,1,0], 57 | [1,1,1,1,1,1,1], 58 | [0,0,0,0,1,1,0], 59 | [0,0,0,0,1,1,0], 60 | [0,0,0,0,1,1,0], 61 | [0,0,0,1,1,1,1] 62 | ],//4 63 | [ 64 | [1,1,1,1,1,1,1], 65 | [1,1,0,0,0,0,0], 66 | [1,1,0,0,0,0,0], 67 | [1,1,1,1,1,1,0], 68 | [0,0,0,0,0,1,1], 69 | [0,0,0,0,0,1,1], 70 | [0,0,0,0,0,1,1], 71 | [0,0,0,0,0,1,1], 72 | [1,1,0,0,0,1,1], 73 | [0,1,1,1,1,1,0] 74 | ],//5 75 | [ 76 | [0,0,0,0,1,1,0], 77 | [0,0,1,1,0,0,0], 78 | [0,1,1,0,0,0,0], 79 | [1,1,0,0,0,0,0], 80 | [1,1,0,1,1,1,0], 81 | [1,1,0,0,0,1,1], 82 | [1,1,0,0,0,1,1], 83 | [1,1,0,0,0,1,1], 84 | [1,1,0,0,0,1,1], 85 | [0,1,1,1,1,1,0] 86 | ],//6 87 | [ 88 | [1,1,1,1,1,1,1], 89 | [1,1,0,0,0,1,1], 90 | [0,0,0,0,1,1,0], 91 | [0,0,0,0,1,1,0], 92 | [0,0,0,1,1,0,0], 93 | [0,0,0,1,1,0,0], 94 | [0,0,1,1,0,0,0], 95 | [0,0,1,1,0,0,0], 96 | [0,0,1,1,0,0,0], 97 | [0,0,1,1,0,0,0] 98 | ],//7 99 | [ 100 | [0,1,1,1,1,1,0], 101 | [1,1,0,0,0,1,1], 102 | [1,1,0,0,0,1,1], 103 | [1,1,0,0,0,1,1], 104 | [0,1,1,1,1,1,0], 105 | [1,1,0,0,0,1,1], 106 | [1,1,0,0,0,1,1], 107 | [1,1,0,0,0,1,1], 108 | [1,1,0,0,0,1,1], 109 | [0,1,1,1,1,1,0] 110 | ],//8 111 | [ 112 | [0,1,1,1,1,1,0], 113 | [1,1,0,0,0,1,1], 114 | [1,1,0,0,0,1,1], 115 | [1,1,0,0,0,1,1], 116 | [0,1,1,1,0,1,1], 117 | [0,0,0,0,0,1,1], 118 | [0,0,0,0,0,1,1], 119 | [0,0,0,0,1,1,0], 120 | [0,0,0,1,1,0,0], 121 | [0,1,1,0,0,0,0] 122 | ],//9 123 | [ 124 | [0,0,0,0], 125 | [0,0,0,0], 126 | [0,1,1,0], 127 | [0,1,1,0], 128 | [0,0,0,0], 129 | [0,0,0,0], 130 | [0,1,1,0], 131 | [0,1,1,0], 132 | [0,0,0,0], 133 | [0,0,0,0] 134 | ]//: 135 | ]; -------------------------------------------------------------------------------- /canvas-master/倒计时炫酷时钟/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Canvas圆形炫酷时钟 6 | 9 | 10 | 11 | 12 | 13 | 你的浏览器不支持canvas,请更换 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /canvas-master/倒计时炫酷时钟/index.js: -------------------------------------------------------------------------------- 1 | 2 | var RADIUS = 8; 3 | var MARGIN_TOP = 60; 4 | var MARGIN_LEFT = 30; 5 | 6 | // 倒计时时间-月份是从0开始，00就是1月份 7 | // const endTime = new Date(2018, 00, 30, 01, 12, 13); 8 | var endTime = new Date(); 9 | endTime.setTime(endTime.getTime() + 3600 * 1000); 10 | // 当前毫秒 11 | var curShowTimeSeconds = 0; 12 | // 小球动画数组和颜色 13 | var balls = []; 14 | const colors = ["#f44336","#e91e63","#e91e63","#00bcd4","#4caf50","#cddc39","#ffeb3b","#ff5722","#795548","#9e9e9e"]; 15 | 16 | 17 | window.onload = function() { 18 | var canvas = document.getElementById('canvas'); 19 | var context = canvas.getContext('2d'); 20 | 21 | 22 | // 自适应 23 | canvas.width = document.body.clientWidth; 24 | canvas.height = document.body.clientHeight; 25 | MARGIN_LEFT = Math.round(canvas.width/10); 26 | MARGIN_TOP = Math.round(canvas.height/5); 27 | RADIUS = Math.round(canvas.width*4/5 / 108)-1; 28 | 29 | 30 | 31 | curShowTimeSeconds = getCurrentShowTimeSeconds(); 32 | setInterval(function(){ 33 | render(context); 34 | upDate(); 35 | 36 | }, 50) 37 | } 38 | 39 | 40 | // 时间变化比较 41 | function upDate() { 42 | var nextShowTimeSeconds = getCurrentShowTimeSeconds(); 43 | 44 | var nextHours = parseInt(nextShowTimeSeconds/3600); 45 | var nextMinutes = parseInt((nextShowTimeSeconds - nextHours * 3600)/60); 46 | var nextSeconds = nextShowTimeSeconds % 60; 47 | 48 | var curHours = parseInt(curShowTimeSeconds/3600); 49 | var curMinutes = parseInt((curShowTimeSeconds - curHours * 3600)/60); 50 | var curSeconds = curShowTimeSeconds % 60; 51 | 52 | if(nextSeconds != curSeconds) { 53 | // 计算彩色小球坐标 54 | if(parseInt(curHours/10) != parseInt(nextHours/10)) { 55 | addBalls(MARGIN_LEFT+0, MARGIN_TOP, parseInt(nextHours/10)); 56 | } 57 | if(parseInt(curHours%10) != parseInt(nextHours%10)) { 58 | addBalls(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(nextHours%10)); 59 | } 60 | 61 | if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)) { 62 | addBalls(MARGIN_LEFT+38*(RADIUS+1), MARGIN_TOP, parseInt(nextMinutes/10)); 63 | } 64 | if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)) { 65 | addBalls(MARGIN_LEFT+53*(RADIUS+1), MARGIN_TOP, parseInt(nextMinutes%10)); 66 | } 67 | 68 | if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)) { 69 | addBalls(MARGIN_LEFT+76*(RADIUS+1), MARGIN_TOP, parseInt(nextSeconds/10)); 70 | } 71 | if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)) { 72 | addBalls(MARGIN_LEFT+91*(RADIUS+1), MARGIN_TOP, parseInt(nextSeconds%10)); 73 | } 74 | 75 | curShowTimeSeconds = nextShowTimeSeconds; 76 | } 77 | upDateBalls(); 78 | console.log(balls.length); 79 | 80 | } 81 | // 彩色小球运动 82 | function upDateBalls() { 83 | for(var i=0; i= canvas.height - RADIUS) { 88 | balls[i].y = canvas.height - RADIUS; 89 | balls[i].vy = -balls[i].vy*0.65; 90 | } 91 | } 92 | // 循环balls数组，删除已出画面的小球 93 | var cnt = 0; 94 | for(var i=0; i0 && balls[i].x-RADIUS cnt) { 100 | balls.pop(); 101 | } 102 | } 103 | 104 | 105 | // 彩色小球数组属性 106 | function addBalls(x, y, num) { 107 | for(var i=0; i=0? ret : 0; 132 | } 133 | 134 | 135 | // 绘制时钟 136 | function render(ctx) { 137 | 138 | // 刷新画布 139 | ctx.clearRect(0, 0, canvas.width, canvas.height); 140 | var hours = parseInt(curShowTimeSeconds/3600); 141 | var minutes = parseInt((curShowTimeSeconds - hours * 3600)/60); 142 | var seconds = curShowTimeSeconds % 60; 143 | 144 | // 时 145 | renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), ctx); 146 | renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), ctx); 147 | renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, ctx); 148 | 149 | // 分 150 | renderDigit(MARGIN_LEFT+38*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), ctx); 151 | renderDigit(MARGIN_LEFT+53*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), ctx); 152 | renderDigit(MARGIN_LEFT+68*(RADIUS+1), MARGIN_TOP, 10, ctx); 153 | 154 | // 秒 155 | renderDigit(MARGIN_LEFT+76*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), ctx); 156 | renderDigit(MARGIN_LEFT+91*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), ctx); 157 | 158 | // 彩色小球绘制 159 | for(var i=0; i 2 | 3 | 4 | 5 | 小球掉落动画 6 | 9 | 10 | 11 | 你的浏览器不支持canvas,请更换 12 | 13 | 52 | 53 | -------------------------------------------------------------------------------- /canvas-master/炫酷时钟/README.md: -------------------------------------------------------------------------------- 1 | ## canvas 炫酷时钟 2 | 3 | ### 实现功能 4 | * [x]小球动态时钟 5 | * [x]彩色小球动画 6 | 7 | ### 实现步骤 8 | 1. 构建一个点阵的二维数组（0-9） 9 | 2. 创建画布 10 | 3. 获取当前的时分秒分别执行绘制函数 11 | 4. 设置定时器执行绘制时钟函数 12 | 5. 对比绘制时钟前的时间和绘制时钟后的时分秒，有变动就执行生成小方块函数 13 | 14 | ### 可能会碰到的问题 15 | 1. 当前时分秒有个位数如何处理？ 16 | >一个以%取余数，一个除以10 17 | 2. 彩色小球重叠绘制？ 18 | >绘制之后的小球没有做动画，一直在原坐标点上 19 | 3. 运行久了消耗电脑CPU 20 | >页面ball.message数组一直在增加，删除走出画面的小球 21 | >1. 判断小球是否在画面内（判断左边缘和右边缘） 22 | >2. 如果小球还在画面内，就放到数组前面 23 | >3. 如果当前小球大于在画面中的小球数量，就删除后面的小球数组 24 | -------------------------------------------------------------------------------- /canvas-master/炫酷时钟/clock.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Canvas圆形炫酷时钟 7 | 16 | 17 | 18 | 19 | 20 | 你的浏览器不支持canvas,请更换 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /canvas-master/炫酷时钟/clock.js: -------------------------------------------------------------------------------- 1 | var c = document.getElementById('canvas'); 2 | c.width = document.body.clientWidth; 3 | c.height = document.body.clientHeight; 4 | 5 | // 全局常量 6 | var marginLeft = Math.round(c.width / 20); 7 | var marginTop = Math.round(c.height / 5); 8 | var radius = Math.round(c.width * 4.5 / 5 / 108) - 1; 9 | 10 | // 全局变量 11 | curHours = new Date().getHours(); 12 | curMinutes = new Date().getMinutes(); 13 | curSeconds = new Date().getSeconds(); 14 | 15 | 16 | 17 | // 兼容性检测 18 | if (c.getContext) { 19 | var ctx = c.getContext('2d'); 20 | // drawing code here 21 | } else { 22 | alert("Your browser doesn't support it Canvas") 23 | } 24 | 25 | 26 | setInterval(function() { 27 | draw.clock(); 28 | contrast(); 29 | 30 | }, 50); 31 | 32 | function contrast() { 33 | nextHours = new Date().getHours(); 34 | nextMinutes = new Date().getMinutes(); 35 | nextSeconds = new Date().getSeconds(); 36 | 37 | // 当前时和下次时的个位十位数比较 38 | if (parseInt(curHours / 10) != parseInt(nextHours / 10)) { 39 | console.log(`当前时${curSeconds}下次时${nextSeconds}`); 40 | ball.add(marginLeft + 0, marginTop, parseInt(nextMinutes / 10)); 41 | 42 | } 43 | if (parseInt(curHours % 10) != parseInt(nextHours % 10)) { 44 | console.log(`当前时${curSeconds}下次时${nextSeconds}`); 45 | ball.add(marginLeft + 15 * (radius + 1), marginTop, parseInt(nextMinutes / 10)); 46 | 47 | } 48 | 49 | // 当前分和下次时的个位十位数比较 50 | if (parseInt(curMinutes / 10) != parseInt(nextMinutes / 10)) { 51 | console.log(`当前分${curSeconds}下次分${nextSeconds}`); 52 | ball.add(marginLeft + 38 * (radius + 1), marginTop, parseInt(nextMinutes / 10)) 53 | 54 | } 55 | if (parseInt(curMinutes % 10) != parseInt(nextMinutes % 10)) { 56 | console.log(`当前分${curSeconds}下次分${nextSeconds}`); 57 | ball.add(marginLeft + 53 * (radius + 1), marginTop, parseInt(nextMinutes % 10)) 58 | } 59 | 60 | // 当前秒和下次时的个位十位数比较 61 | if (parseInt(curSeconds / 10) != parseInt(nextSeconds / 10)) { 62 | console.log(`当前秒${curSeconds}下次秒${nextSeconds}`); 63 | ball.add(marginLeft + 76 * (radius + 1), marginTop, parseInt(nextSeconds / 10)) 64 | } 65 | if (parseInt(curSeconds % 10) != parseInt(nextSeconds % 10)) { 66 | console.log(`当前秒${curSeconds}下次秒${nextSeconds}`); 67 | ball.add(marginLeft + 91 * (radius + 1), marginTop, parseInt(nextSeconds % 10)); 68 | 69 | } 70 | 71 | 72 | // 当前的等于下次的 73 | curHours = nextHours; 74 | curMinutes = nextMinutes; 75 | curSeconds = nextSeconds; 76 | ball.up(); 77 | console.log(`当前页面有${ball.message.length}个小球`); 78 | 79 | 80 | } 81 | // 小球 82 | var ball = { 83 | colors: [ 84 | "#666699", 85 | "#0099CC", 86 | "#CC3399", 87 | "#FFFF00", 88 | "#009933", 89 | "#CC6600", 90 | "#FF6666", 91 | "#CCCCCC", 92 | "#009999", 93 | "#FF0033" 94 | ], 95 | message: [], 96 | // 添加小球 97 | add: function(x, y, num) { 98 | for (var i = 0; i < digit[num].length; i++) { 99 | for (var j = 0; j < digit[num][i].length; j++) { 100 | if (digit[num][i][j] == 1) { 101 | var aBall = { 102 | x: x + j * 2 * (radius + 1) + (radius + 1), 103 | y: y + i * 2 * (radius + 1) + (radius + 1), 104 | g: 1.5 + Math.random(), 105 | angle: "90deg", 106 | vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 4, 107 | vy: -5, 108 | color: ball.colors[Math.floor(Math.random() * ball.colors.length)] 109 | }; 110 | 111 | ball.message.push(aBall); 112 | } 113 | } 114 | } 115 | }, 116 | 117 | up: function() { 118 | for (var i = 0; i < ball.message.length; i++) { 119 | ball.message[i].x += ball.message[i].vx; 120 | ball.message[i].y += ball.message[i].vy; 121 | ball.message[i].vy += ball.message[i].g; 122 | if (ball.message[i].y >= c.height - radius) { 123 | ball.message[i].y = c.height - radius; 124 | ball.message[i].vy = -ball.message[i].vy * 0.62; 125 | } 126 | } 127 | 128 | var cnt = 0; 129 | for (var i = 0; i < ball.message.length; i++) { 130 | if ( 131 | ball.message[i].x + radius > 0 && 132 | ball.message[i].x - radius < c.width 133 | ) { 134 | ball.message[cnt++] = ball.message[i]; 135 | } 136 | } 137 | 138 | while (ball.message.length > cnt) { 139 | ball.message.pop(); 140 | } 141 | } 142 | }; 143 | 144 | 145 | // 绘制时钟 146 | var draw = { 147 | 148 | clock: function() { 149 | ctx.clearRect(0, 0, c.width, c.height); 150 | var time = new Date(); 151 | var hours = time.getHours(); 152 | var minutes = time.getMinutes(); 153 | var seconds = time.getSeconds(); 154 | console.log(hours, minutes, seconds); 155 | 156 | // 时 157 | draw.renderDigit(marginLeft, marginTop, parseInt(hours / 10), ctx); 158 | draw.renderDigit(marginLeft + 15 * (radius + 1), marginTop, parseInt(hours % 10), ctx); 159 | draw.renderDigit(marginLeft + 30 * (radius + 1), marginTop, 10, ctx); 160 | 161 | // 分 162 | draw.renderDigit(marginLeft + 38 * (radius + 1), marginTop, parseInt(minutes / 10), ctx); 163 | draw.renderDigit(marginLeft + 53 * (radius + 1), marginTop, parseInt(minutes % 10), ctx); 164 | draw.renderDigit(marginLeft + 68 * (radius + 1), marginTop, 10, ctx); 165 | 166 | // 秒 167 | draw.renderDigit(marginLeft + 76 * (radius + 1), marginTop, parseInt(seconds / 10), ctx); 168 | draw.renderDigit(marginLeft + 91 * (radius + 1), marginTop, parseInt(seconds % 10), ctx); 169 | 170 | // 绘制彩色小球 171 | for (var i = 0; i < ball.message.length; i++) { 172 | ctx.fillStyle = ball.message[i].color; 173 | ctx.beginPath(); 174 | ctx.arc(ball.message[i].x, ball.message[i].y, radius, 0, 2 * Math.PI); 175 | // ctx.rect(ball.message[i].x, ball.message[i].y, radius * 2, radius * 2); 176 | ctx.closePath(); 177 | ctx.fill(); 178 | } 179 | 180 | }, 181 | 182 | // 绘制函数 183 | renderDigit: function(x, y, num) { 184 | 185 | ctx.fillStyle = "#0099CC"; 186 | 187 | for (var i = 0; i < digit[num].length; i++) { 188 | for (var j = 0; j < digit[num][i].length; j++) { 189 | // 计算圆心的位置 190 | // ctxX：x+j*2*(R+1)+(R+1) 191 | // ctxY：y+i*2*(R+1)+(R+1) 192 | if (digit[num][i][j] == 1) { 193 | ctx.beginPath(); 194 | ctx.arc( 195 | x + j * 2 * (radius + 1) + (radius + 1), 196 | y + i * 2 * (radius + 1) + (radius + 1), 197 | radius, 198 | 0, 199 | 2 * Math.PI 200 | ); 201 | // ctx.rect(x + j * 2 * (radius + 1) + (radius + 1), y + i * 2 * (radius + 1) + (radius + 1), radius * 2, radius * 2); 202 | ctx.closePath(); 203 | ctx.fill(); 204 | } 205 | } 206 | } 207 | } 208 | }; -------------------------------------------------------------------------------- /canvas-master/炫酷时钟/digit.js: -------------------------------------------------------------------------------- 1 | digit = 2 | [ 3 | [ 4 | [0,0,1,1,1,0,0], 5 | [0,1,1,0,1,1,0], 6 | [1,1,0,0,0,1,1], 7 | [1,1,0,0,0,1,1], 8 | [1,1,0,0,0,1,1], 9 | [1,1,0,0,0,1,1], 10 | [1,1,0,0,0,1,1], 11 | [1,1,0,0,0,1,1], 12 | [0,1,1,0,1,1,0], 13 | [0,0,1,1,1,0,0] 14 | ],//0 15 | [ 16 | [0,0,0,1,1,0,0], 17 | [0,1,1,1,1,0,0], 18 | [0,0,0,1,1,0,0], 19 | [0,0,0,1,1,0,0], 20 | [0,0,0,1,1,0,0], 21 | [0,0,0,1,1,0,0], 22 | [0,0,0,1,1,0,0], 23 | [0,0,0,1,1,0,0], 24 | [0,0,0,1,1,0,0], 25 | [1,1,1,1,1,1,1] 26 | ],//1 27 | [ 28 | [0,1,1,1,1,1,0], 29 | [1,1,0,0,0,1,1], 30 | [0,0,0,0,0,1,1], 31 | [0,0,0,0,1,1,0], 32 | [0,0,0,1,1,0,0], 33 | [0,0,1,1,0,0,0], 34 | [0,1,1,0,0,0,0], 35 | [1,1,0,0,0,0,0], 36 | [1,1,0,0,0,1,1], 37 | [1,1,1,1,1,1,1] 38 | ],//2 39 | [ 40 | [1,1,1,1,1,1,1], 41 | [0,0,0,0,0,1,1], 42 | [0,0,0,0,1,1,0], 43 | [0,0,0,1,1,0,0], 44 | [0,0,1,1,1,0,0], 45 | [0,0,0,0,1,1,0], 46 | [0,0,0,0,0,1,1], 47 | [0,0,0,0,0,1,1], 48 | [1,1,0,0,0,1,1], 49 | [0,1,1,1,1,1,0] 50 | ],//3 51 | [ 52 | [0,0,0,0,1,1,0], 53 | [0,0,0,1,1,1,0], 54 | [0,0,1,1,1,1,0], 55 | [0,1,1,0,1,1,0], 56 | [1,1,0,0,1,1,0], 57 | [1,1,1,1,1,1,1], 58 | [0,0,0,0,1,1,0], 59 | [0,0,0,0,1,1,0], 60 | [0,0,0,0,1,1,0], 61 | [0,0,0,1,1,1,1] 62 | ],//4 63 | [ 64 | [1,1,1,1,1,1,1], 65 | [1,1,0,0,0,0,0], 66 | [1,1,0,0,0,0,0], 67 | [1,1,1,1,1,1,0], 68 | [0,0,0,0,0,1,1], 69 | [0,0,0,0,0,1,1], 70 | [0,0,0,0,0,1,1], 71 | [0,0,0,0,0,1,1], 72 | [1,1,0,0,0,1,1], 73 | [0,1,1,1,1,1,0] 74 | ],//5 75 | [ 76 | [0,0,0,0,1,1,0], 77 | [0,0,1,1,0,0,0], 78 | [0,1,1,0,0,0,0], 79 | [1,1,0,0,0,0,0], 80 | [1,1,0,1,1,1,0], 81 | [1,1,0,0,0,1,1], 82 | [1,1,0,0,0,1,1], 83 | [1,1,0,0,0,1,1], 84 | [1,1,0,0,0,1,1], 85 | [0,1,1,1,1,1,0] 86 | ],//6 87 | [ 88 | [1,1,1,1,1,1,1], 89 | [1,1,0,0,0,1,1], 90 | [0,0,0,0,1,1,0], 91 | [0,0,0,0,1,1,0], 92 | [0,0,0,1,1,0,0], 93 | [0,0,0,1,1,0,0], 94 | [0,0,1,1,0,0,0], 95 | [0,0,1,1,0,0,0], 96 | [0,0,1,1,0,0,0], 97 | [0,0,1,1,0,0,0] 98 | ],//7 99 | [ 100 | [0,1,1,1,1,1,0], 101 | [1,1,0,0,0,1,1], 102 | [1,1,0,0,0,1,1], 103 | [1,1,0,0,0,1,1], 104 | [0,1,1,1,1,1,0], 105 | [1,1,0,0,0,1,1], 106 | [1,1,0,0,0,1,1], 107 | [1,1,0,0,0,1,1], 108 | [1,1,0,0,0,1,1], 109 | [0,1,1,1,1,1,0] 110 | ],//8 111 | [ 112 | [0,1,1,1,1,1,0], 113 | [1,1,0,0,0,1,1], 114 | [1,1,0,0,0,1,1], 115 | [1,1,0,0,0,1,1], 116 | [0,1,1,1,0,1,1], 117 | [0,0,0,0,0,1,1], 118 | [0,0,0,0,0,1,1], 119 | [0,0,0,0,1,1,0], 120 | [0,0,0,1,1,0,0], 121 | [0,1,1,0,0,0,0] 122 | ],//9 123 | [ 124 | [0,0,0,0], 125 | [0,0,0,0], 126 | [0,1,1,0], 127 | [0,1,1,0], 128 | [0,0,0,0], 129 | [0,0,0,0], 130 | [0,1,1,0], 131 | [0,1,1,0], 132 | [0,0,0,0], 133 | [0,0,0,0] 134 | ]//: 135 | ]; -------------------------------------------------------------------------------- /canvas-master/炫酷时钟/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 小球掉落动画 6 | 9 | 10 | 11 | 你的浏览器不支持canvas,请更换 12 | 13 | 52 | 53 | -------------------------------------------------------------------------------- /css动画/code/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | overflow: hidden; 4 | } 5 | 6 | .wrap { 7 | height: 100vh; 8 | width: 100vw; 9 | transform-origin: 50% 100%; 10 | transform-style: preserve-3d; 11 | animation: rotate 10s infinite linear; 12 | } 13 | 14 | @keyframes rotate { 15 | 0% { 16 | transform: perspective(800px)rotateX(60deg); 17 | } 18 | 19 | 25% { 20 | transform: perspective(800px) rotateZ(30deg) rotateX(70deg); 21 | } 22 | 23 | 50% { 24 | transform: perspective(800px)rotateX(60deg); 25 | } 26 | 27 | 75% { 28 | transform: perspective(800px) rotateZ(-30deg) rotateX(70deg); 29 | } 30 | 31 | 100% { 32 | transform: perspective(800px)rotateX(60deg); 33 | } 34 | } 35 | 36 | .wrap div { 37 | transform-style: preserve-3d; 38 | } 39 | 40 | .road { 41 | height: 300%; 42 | width: 100%; 43 | bottom: 0; 44 | background: #ccc; 45 | position: absolute; 46 | } 47 | 48 | .road::after { 49 | content: ''; 50 | position: absolute; 51 | height: 100%; 52 | width: 100%; 53 | background-image: linear-gradient(#000 0, #000 75%, transparent 75%); 54 | background-size: 10px 100px; 55 | -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 49%, #000 49%, #000 50%, transparent 50%); 56 | animation: moveOn .1s infinite linear; 57 | } 58 | 59 | @keyframes moveOn { 60 | 0% { 61 | transform: translateY(0); 62 | } 63 | 100% { 64 | transform: translateY(100px); 65 | } 66 | } 67 | .fly { 68 | position: absolute; 69 | bottom: 10vw; 70 | left: 50%; 71 | animation: fly 3s infinite; 72 | } 73 | 74 | @keyframes fly { 75 | 0% { 76 | transform: translate3d(-30vw, 0, 20vw)rotateY(0deg) 77 | } 78 | 79 | 5% { 80 | transform: translate3d(-30vw, 0, 20vw)rotateY(30deg) 81 | } 82 | 83 | 50% { 84 | transform: translate3d(30vw, 0, 20vw)rotateY(0deg) 85 | } 86 | 87 | 55% { 88 | transform: translate3d(30vw, 0, 20vw)rotateY(-30deg) 89 | } 90 | 91 | 100% { 92 | transform: translate3d(-30vw, 0, 20vw)rotateY(0deg) 93 | } 94 | } 95 | 96 | .fly::after { 97 | content: ''; 98 | position: absolute; 99 | height: 20vw; 100 | width: 1vw; 101 | background-color: brown; 102 | bottom: 10vw; 103 | left: -.5vw; 104 | animation: hit infinite .1s; 105 | } 106 | 107 | @keyframes hit { 108 | 0% { 109 | transform: translateY(0) 110 | } 111 | 112 | 100% { 113 | transform: translate3d(0, -300vw, -20vw) 114 | } 115 | } 116 | 117 | :root { 118 | --color-wing: rgb(187, 140, 86); 119 | } 120 | 121 | .flyBody { 122 | position: absolute; 123 | height: 30vw; 124 | width: 3vw; 125 | transform: translate(-50%, -50%) rotateY(90deg); 126 | background-color: #000; 127 | border-radius: 50% 50% 0 0 / 100% 100% 0 0; 128 | 129 | } 130 | 131 | .wing { 132 | position: absolute; 133 | height: 10vw; 134 | width: 30vw; 135 | background: var(--color-wing); 136 | transform: translate(-50%, -50%); 137 | border-radius: 50%/0 0 50% 50%; 138 | } 139 | 140 | .bottomwing { 141 | position: absolute; 142 | height: 5vw; 143 | width: 10vw; 144 | background: var(--color-wing); 145 | transform: translate3d(-50%, 200%, 2vw); 146 | border-radius: 50%/0 0 50% 50%; 147 | } -------------------------------------------------------------------------------- /css动画/code/飞机动画.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |
    12 |
    13 |
    14 |
    15 |
    16 |
    17 |
    18 |
    19 | 20 | -------------------------------------------------------------------------------- /time.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/fanyijie-21/Demo/1da9e5c0e4c97a9df987397b77964f0d974ed722/time.js --------------------------------------------------------------------------------