html+css+js好看的梅花

2014-01-22 12:10:19

meihua.html:

flute | Welcome to blog

leaves.css:

.leave { position: fixed; width: 25px; height: 20px; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-direction: normal, normal; -webkit-animation-timing-function: linear, ease-in; -moz-animation-iteration-count: infinite, infinite; -moz-animation-direction: normal, normal; -moz-animation-timing-function: linear, ease-in; -o-animation-iteration-count: infinite, infinite; -o-animation-direction: normal, normal; -o-animation-timing-function: linear, ease-in; animation-iteration-count: infinite, infinite; animation-direction: normal, normal; animation-timing-function: linear, ease-in; } .leave>img { position: fixed; width: 25px; height: 20px; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -webkit-transform-origin: 50% -100%; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-timing-function: ease-in-out; -moz-transform-origin: 50% -100%; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-timing-function: ease-in-out; -o-transform-origin: 50% -100%; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; transform-origin: 50% -100%; } @-webkit-keyframes fade { 0% { opacity: 1 } 95% { opacity: 1 } 100% { opacity: 0 } } @-webkit-keyframes drop { 0% { -webkit-transform: translate(30px, -50px) } 100% { -webkit-transform: translate(-200px, 650px) } } @-webkit-keyframes clockwiseSpin { 0% { -webkit-transform: rotate(-50deg) } 100% { -webkit-transform: rotate(50deg) } } @-webkit-keyframes counterclockwiseSpinAndFlip { 0% { -webkit-transform: scale(-1, 1) rotate(50deg) } 100% { -webkit-transform: scale(-1, 1) rotate(-50deg) } } @-moz-keyframes fade { 0% { opacity: 1 } 95% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes drop { 0% { -moz-transform: translate(30px, -50px) } 100% { -moz-transform: translate(-200px, 650px) } } @-moz-keyframes clockwiseSpin { 0% { -moz-transform: rotate(-50deg) } 100% { -moz-transform: rotate(50deg) } } @-moz-keyframes counterclockwiseSpinAndFlip { 0% { -moz-transform: scale(-1, 1) rotate(50deg) } 100% { -moz-transform: scale(-1, 1) rotate(-50deg) } } @-o-keyframes fade { 0% { opacity: 1 } 95% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes drop { 0% { -o-transform: translate(30px, -50px) } 100% { -o-transform: translate(-200px, 650px) } } @-o-keyframes clockwiseSpin { 0% { -o-transform: rotate(-50deg) } 100% { -o-transform: rotate(50deg) } } @-o-keyframes counterclockwiseSpinAndFlip { 0% { -o-transform: scale(-1, 1) rotate(50deg) } 100% { -o-transform: scale(-1, 1) rotate(-50deg) } } @keyframes fade { 0% { opacity: 1 } 95% { opacity: 1 } 100% { opacity: 0 } } @keyframes drop { 0% { transform: translate(30px, -50px) } 100% { transform: translate(-200px, 650px) } } @keyframes clockwiseSpin { 0% { transform: rotate(-50deg) } 100% { transform: rotate(50deg) } } @keyframes counterclockwiseSpinAndFlip { 0% { transform: scale(-1, 1) rotate(50deg) } 100% { transform: scale(-1, 1) rotate(-50deg) } } #meihua { background: url(images/xbg.png) no-repeat; width: 278px; height: 155px; right: 0; top: 0; position: fixed; z-index: 1; }

leaves.js:

~(function(doc) { var FallingLeaves = function(num, id) { this.body = doc.body; this.support = false; this.container = id ? doc.getElementById('id') : this.body; this.num = num ? num : 5; this.init() }; FallingLeaves.prototype = { init: function() { this.supportNot(); if (this.support != false) { for (var i = 0; i < this.num; i++) { this.container.appendChild(this.createLeaf()) } } }, supportNot: function() { var domPrefixes = 'Webkit Moz O ms a'.split(' '); for (var i = 0; i < domPrefixes.length; i++) { if (this.container.style[domPrefixes[i] + 'AnimationName'] ! undefined) { this.support = domPrefixes[i]; break } if (domPrefixes[i] "a") { if (this.container.style.animationName ! undefined) { this.support = domPrefixes[i]; break } } } }, imgurl: function() { var i = 0, got = -1, len = doc.getElementsByTagName('script').length; while (i <= len && got -1) { var jsurl = doc.getElementsByTagName('script')[i].src, got = jsurl.indexOf('leaves.js'); i++ } return js_url.replace('leaves.js', 'images/') }, randomInteger: function(low, high) { return low + Math.floor(Math.random() * (high - low)) }, randomFloat: function(low, high) { return low + Math.random() * (high - low) }, pixelValue: function(value) { return value + 'px' }, durationValue: function(value) { return value + 's' }, createLeaf: function() { var self = this, leafDiv = doc.createElement('div'), image = doc.createElement('img'), spinAnimationName = (Math.random() < 0.5) ? 'clockwiseSpin' : 'counterclockwiseSpinAndFlip', fadeAndDropDuration = self.durationValue(self.randomFloat(5, 11)), spinDuration = self.durationValue(self.randomFloat(4, 8)), leafDelay = self.durationValue(self.randomFloat(0, 5)); leafDiv.className = "leave"; image.src = self.imgurl() + self.randomInteger(1, self.num) + '.png'; leafDiv.style.top = self.pixelValue(30); leafDiv.style.right = self.pixelValue(self.randomInteger(0, 50)); if (self.container.style[self.support + 'AnimationName'] ! undefined) { image.style[self.support + 'AnimationName'] = spinAnimationName; image.style[self.support + 'AnimationDuration'] = spinDuration; leafDiv.style[self.support + 'AnimationName'] = 'fade, drop'; leafDiv.style[self.support + 'AnimationDelay'] = leafDelay + ', ' + leafDelay; leafDiv.style[self.support + 'AnimationDuration'] = fadeAndDropDuration + ', ' + fadeAndDropDuration } if (this.support "a") { image.style.animationName = spinAnimationName; image.style.animationDuration = spinDuration; leafDiv.style.animationName = 'fade, drop'; leafDiv.style.animationDelay = leafDelay + ', ' + leafDelay; leafDiv.style.animationDuration = fadeAndDropDuration + ', ' + fadeAndDropDuration } leafDiv.appendChild(image); return leafDiv } }; new FallingLeaves(); })(document);

查看示例

foreach的两种用法

foreach 语句只是一种遍历数组简便方法。foreach 仅能用于数组,当试图将其用于其它数据类型或者一个未初始化的变量时会产生错误。有两种语法,第二种比较次要但却是第一种的有用的扩展。 1 . `foreach (array_expression as $value) statement`第一种格式遍历给定的 `array_expression` 数组。每次循环中,当前单元的值被赋给` $value `并且数组内部的指针向前移一步(因此下一次循环中将会得到下一个单元)。example:foreach(array_name as $value) { statement; } 这里的`array_name`是你要遍历的数组名,每次循环中,`array_name`数组的当前元素的值被赋给`$value`,并且数组内部的下标向下移一步,也就是下次循环回得到下一个元素。2 . `foreach (array_expression as $key => $value) statement`第二种格式做同样的事,

本地启用IIS后再安装WAMP无法启动

原来在电脑上搭建过IIS8+PHP+MYSQL+phpAdmin,后来由于数据库的原因便放弃了使用,便在网上找了一个WAMP的集成包用,这样就方便很多了,也不用那么麻烦再去费时间配环境了,省事是省事,结果装好之后阿帕奇(Apache)怎么都启动不了,后来想了想应该是之前开了IIS服务器,应该会冲突,于是把IIS给关了,结果阿帕奇马上就能重启了。