- 博客(40)
- 资源 (6)
- 收藏
- 关注
RSS订阅转载 JS | Web Audio API (下) 我的音乐浪
“沧海一声唱 滔滔两岸潮 浮沉随浪歌舞今朝 苍天唱 纷纷世上潮 谁负谁胜出天知晓 江山唱 烟雨遥 涛浪淘尽红尘俗世几多娇 清风唱 竟惹寂寥 豪情还剩了一襟晚照 苍生唱 不再寂寥 豪情仍在痴痴唱唱”—— 题记，《沧海一声唱》### 正文在上文 [JS | Web Audio API (上) 你的音谱](http://www.j
2017-03-03 14:28:16
2027
转载 CSS | steps 的内心探索之路
“我要一步一步往前跳，在最远方乘着web往前飞；小小的天……我有属于我的天”——题记，改编源自《蜗牛》正文当我们给元素做动画的时候，可能会用到steps，把多个图片拼合成一张雪碧图，改变background-position进行动画，简便而又强大的属性。如同变形金刚，“卡卡卡”，而有时又被它搞得一愣一愣的，咦，咋没看到最后一张图。用归用，不由疑惑steps到底是个什么鬼？索
2017-01-23 17:34:11
614
转载 CSS | 渐变的妙不可言 linear & radial
“你以为你这么低调我就找不到你了吗？没有用的，像你这样拉风的属性，只要有你在的地方，就好像黑夜中的萤火虫一样，那样的鲜明，那样的出众；你那委婉的形状，奇特的写法，神乎其技的思路，还有那百转千回……都深深地迷住了我。”——题记，改自《国产凌凌漆》正文最近发现css3渐变无敌，边边角角利用linear-gradient或者radial-gradient也可以实现，如下图，包括之前所
2017-01-23 17:32:13
735
转载 JS | canvas 画笔讲谈 + 纹理
"它画笔的名堂呢，称之为九天十地，web点头啪啪，霹雳金光雷电掌！一笔画出，方圆百里之内，不论颜色，状态，纹理，全部都手到擒来！"——题记，改自《鹿鼎记》正文“别看我只是支画笔，我有雄心志气高”，今天便来讲讲canvas的画笔。之前做H5 canvas绘画时，思考如何让画出来的线条有纹理，翻找半天找不出个所以然，机缘巧合得知有个createPattern属性，嘿，成了，效果图如
2017-01-13 18:15:00
4521
转载 JS | canvas 绘制多图
“处理图片是我们普通市民的责任，积累跬步是我本身的兴趣，所以加载图片我每次都跑一次，如果遇到多张图片的话我还会多跑几次。”——题记，改自《破坏之王》正文canvas一箩筐问题， 之前一文 JS | canvas 图片模糊 讲了合成图的模糊，本文讲讲另一个，canvas绘制多图，这也是在做H5的过程中遇到的一个坎，比如说合成图少元素，比如说跨域等。原始做法：前提多张图
2017-01-12 11:09:39
4445
转载 JS | canvas 合成图模糊
“模糊是多么 多么寂寞；模糊是多么 多么空虚；独自在清晰中，对比不断地扫过；我的寂寞，谁能明白我；模糊是多么 多么寂寞；模糊是多么 多么空虚；web开发的你，可不可听我诉说；我的寂寞，无尽的寂寞……”——题记，改编源自《美人鱼》昨夜西风凋碧树，独上高楼，望尽天涯路。写H5 canvas的时候，我们可能会遇到这样那样的问题，比如说canvas合成的图片模糊，俗语有言“一颗老鼠屎坏
2017-01-11 14:47:51
3515
转载 CSS | “百变”图片秀 mask
“mask-image”看着“图片”：“你想变啊！图片，你要是想变的话你就来找我嘛，你不找我怎么知道你想变呢？固然你不太懂跟我怎么相处，然则你照旧得找我，我会带你的嘛，不相处你说你想变我不给你变，你不想变我也不给你变，要讲沟通嘛！你想改头换面就来找我，我肯定给你想要的诶，你是真的想整型吧？”。——题记，改编源自《大话西游之仙履奇缘》正文我们在写前端样式的时候，css中实现不规则的图
2016-12-26 10:08:47
561
转载 css | 不规则 的图片 clip-path
“我就係風魔萬千前端開發，改造web風氣，刺激圖片市場，提高代碼內涵，玉樹臨風，風度翩翩的css專家之一，我個名叫剪切路徑，英文名叫clip-path”。——题记，改编源自《整蛊专家》正文话说我们上回讲道：如何利用css实现多边形，综之原理便是利用width、height为0，结合border，一个纯多边形在代码下诞生了。那么，图片呢，我突然想让图片也显示的不规则，咋弄。今
2016-12-22 16:28:35
2376
转载 css | 实现有趣的多边形
“曾经有一个多边形摆在我面前，我不懂实现，等我查询探索时，才发现它的巧妙非常，css的灵活不绝于此。如果上天能够给它一个说话的机会，它告诉世界：无敌，是多么，多么寂寞！如果非要给这个无敌加上个期限，那就是：无极限！”——题记，改编源自《仙履奇缘》正文前端开发路漫漫，在行走web世界的路途中，我们肯定有遇到多边形的设计，最简单的方法莫过于直接上图片走起，作为一个有“追求”的前
2016-12-20 10:56:06
1930
原创 web工具篇 | 保存刷新之browser sync / windows
久远前发了篇博文，是关于sublime保存刷新的工具——使用sublime的插件。今天分享个新的保存刷新方法，利用browser sync，如果你听过git的话，这个方法可以一试。如果会了，可以跳过。运行环境：windows需要工具：chrome，sublime text，git for windows(下载)下载好git for windows后，打开windows的cm
2016-11-08 15:36:32
657
原创 JS 之访谈时间戳
——JS有约：说出你的故事。——坐在对面的时间戳：就那点事，说啥……导语：”时间戳，分秒必争始于1970年，1970年1月1日，是Unix time启始的日子，年代悠久，源远流长。“访谈环境：chrome浏览器我们先看一个数字：1478512668000，这么一长串数字，可否觉得好奇，这是啥？这是在与后台连接的时候，比如说需要获取时间，后台以时间戳的形式传过来。
2016-11-07 19:33:33
628
原创 CSS3| 制作文字波浪线效果
css的设计之巧妙，实现之精妙，细细寻味，其妙非凡，妙不可言。这波浪线，取巧的运用了linear-gradient属性，合角度、颜色、位置于一体，配合background-size，background-repeat，化一为多，平滑过渡。哇，这最后的效果太巧秒了！尘世间没有词来形容了…… ——题记，改编自《食神》正文语法：linear-gradient(di
2016-11-07 16:27:36
5388
原创 js | event delegation 事件委托之双十一
眼看双十一就要来了，周围的人寻思估摸着要“剁手，吃土”了，购物车里，那是加了一件又一件。话说马云师兄，咳咳，鄙人不才，同一母校，导开了电商之路后，那快递，可是摞了一叠，叠了再摞，纸山袋海。额，不好意思，接个电话，“喂，您的快递到了，麻烦签收一下”，“好的好的”。快递行业，雄起，快递小哥的工资也是“蹭蹭蹭”往上涨。这说明什么，说明人的购物欲望之强烈，还是十分之强烈。话说回来，快递到了，得要签收吧，有
2016-11-02 10:31:35
622
原创 img的complete跟onload（可有人懂最后的问题彩蛋）
在图片预加载编码的时候看到onload跟complete，思考，onload跟complete有什么区别？测试在chrome环境下。动手实践，编了一小段简单的测试代码document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/1-logo.png"
2016-09-26 17:05:28
7453
1
原创 说说css3动画效果那点事儿（一）
“H5，CSS3很强大呀，CSS3动画效果很好呀”，今天，我们便来初识一下CSS3的魅力吧……1. animation //CSS3动画，从一种样式转变为另一种样式的效果语法：animation: name duration timing-function delay iteration-count direction;参数意义name ／／绑定到选择器的keyframe名称，默认
2016-03-14 21:19:41
440
原创 谈谈css王朝的px，em，rem之间的那些事儿
话说，CSS（层叠样式表）有常见的三个单位兄弟，px，em，rem，作为前端人员，跟着三兄弟之间打的交道也是比较多，现在我们来介绍一下，这三个兄弟吧……1. px 常见老大，像素（Pixel），相对长度单位，是指相对于相识屏幕分辨率而言的，分辨率越高，像素点越小，反之，分辨率越低，点较大，比如说在800＊600的分辨率和1024*728的分辨率比较，在1024*768的分辨率下文字会显得小；
2016-03-14 17:04:03
550
原创 哈～css模型（一）
作为前端，当你在敲代码，体验页面的时候，总是不断对位置啊什么的修修改改，有时候想，——咦，我明明设的刚刚好，为什么它跑下面去了；——哎呀，这莫名其妙的咋移位了呢；——莫名就跳出来了……额我觉得，我们还是重新认识下css的盒模型吧，今天讲下W3C盒模型和IE盒模型。见下图这是标准W3C的盒模型，如下数据：
2016-03-09 22:06:36
452
原创 重读JSON
好吧，json这个词对于前端来说，应该不是第一次听到了，鄙人在之前的项目中有用到json，那json到底是什么一个东西呢？简单的再自我学习下。JSON，英文名称，Javascript Object Notation，很明显，取了第一个字母，歪果基本的命名方法，javascript对象表示发，用javascript的语法来描述对象，是一种轻量级的数据交换格式,比较适合于服务器与javascrip
2016-03-09 21:12:46
403
原创 sublime Text3之保存刷新 Browser Refresh
进行web编码的过程中，我们不厌其烦的进行 编码，ctrl+s保存，打开浏览器，刷新，就这样循环复循环，当然这无疑反映了开发人员在这点上是个很有耐心的人，后来发现有一天手指要起茧了，如果你有隐隐的莫名疼痛，ok，想不想简化步骤呢，或者能不能在保存后就刷新呢，省了不少事……今天推荐一个Sublime Text 3的插件，Browser Refresh，实现保存后页面刷新的问题。1. 既然是插
2015-11-25 11:33:34
8372
7
原创 html5之div，article，section区别与应用
近来，发现自己编码有个问题，对article，div，section有些乱用，索性就好好了解下他们的区别，写个文章，好好的科普一下……div:hello，大家好。我叫div，对应英文单词中的division，我是块级元素，就是在我里面的内容会自动开始新行，可以定义文档中的分区或节，把文档分割成独立，不同的部分，我参加的国际会议是这么介绍我的，“The div element ha
2015-09-17 17:01:54
13598
原创 html之标签内联块元素的那些事
这几天经常看到inline和block元素，inline，block……那么我们索性就来了解一下html中哪些是内联元素，哪些又是块元素呢？我们来看一下常见的语义化标签块级元素（block）：自动占据一行的，通过设置高度，宽度可以直接改变大小div，h1 ~ h6，p，ul，ol，dl，li，form，table，menu，address，pre，blockquote，hr，noscrip
2015-09-14 10:12:23
5775
原创 微说DOM
DOM对于前端来说应该并不陌生，一个很基本的概念，今天就来简单的说说下什么是DOM，也是让自己做到一个理解~下面有请DOM出场：DOM，英文名Document Object Model，中文名文档对象模型，根据w3c DOM规范，可以理解为网页的API，是w3c组织推荐的处理可扩展标记语言的标准编程接口，但独立于平台和语言，就是跟它们半毛钱关系都没有。就是说，这是一个表示和处理一个HTML
2015-09-03 19:33:18
508
原创 基于Mac的网站临时域名发布小结
一直对怎么发布网站比较好奇，这段时间有时间就自己捣鼓一下，总觉得，呀，能发布一个网站，好高大上的样子，撒花，撒花……今天微也来简单说说网站发布到底是啥情况，咋弄捏？刚开始，还是有些小烦躁的，怎么还没出现我的网站啊，当你成功看见的时候，也就这样吧。做了个自己的网站，嘿嘿，装个逼，想发布看看，怎么搞？网上也有很多，说空间，域名巴拉巴拉的，回过头来看看，其实讲的也不错，不过还是有点差别额，好的，
2015-08-26 19:57:58
1132
原创 浅谈WEB标准
WEB标准，WEB标准，可亲可爱的WEB，什么是你定下的标准呢。这几天又重新回归最基础的知识了，OK，言归正传，什么是WEB标准，为什么要用WEB标准？比如说，现在的浏览器版本多吧，chrome，Safari，IE，firefox等等，版本多，问题就来了，怎么统一呀，中国有句老话有时候还是有道理的，“没有规矩，不成方圆”，每个WEB开发者如果各有各的标准，你写的我看不懂，我写的你看不懂，这不就
2015-08-25 00:21:29
1353
12
原创 css学习选择器之:nth-child(n)
今天新学习了一个小效果，网站比如说实现间行颜色变化，比如说一行黑，一行白，好吧，斑马就出现了，当你鼠标触碰某一行，颜色背景变化，尤其是当你连接数据库时，简单的代码就显得很重要了.这时候一个有意思的朋友出现了，:nth-child(n) 一直在那蹦跶着说“找我呀”，这个是说选择器匹配属于其父元素的第N个子元素，从0开始，比如说p:nth-child(2)指下标为2的p元素，就是第3个元素；然后
2015-08-24 11:42:20
1740
原创 Ajax学习笔记－基础原理
之前对于Ajax能实现简单基本的应用，但并不了解它的原理，就是俗话说的“代码的搬运工”，不踏实，这几天重新看了下Ajax的内容，今天分享下这次的学习吧。Ajax, asynchronous javascript and xml(个人比较喜欢知道它的全拼），即为异步的 javascript 和XML；简单讲下，javascript是一种网络的脚本语言；XML（extensible marku
2015-08-23 21:23:14
986
原创 Mac下web配置phpAdmin小结
在windows下，本人是将PhpMyAdmin＋My SQL Workbench结合使用，比较了下，先安装PhpMyAdmin用用；1.下载PhpMyAdmin，官网：http://www.phpmyadmin.net，点击download即可下载，小V下的是phpMyAdmin-4.4.12-all-languages.zip2.Mac会自动解压，然后将其放在自己的Sites文件夹下，
2015-08-06 16:48:29
1769
1
原创 Mac 10.10 web环境配置之php＋mysql小结
继上一篇对apache配置之后，现在对php以及mysql进行配置……1.php配置是比较简单的，因为Mac自带php，手动开启下就好，打开终端（terminal），输入sudo vi /etc/apache2/httpd.conf进入vi面板进行修改（shift ＋ i），找到＃LoadModule php5_module libexec/apache2/libphp5.so这句，然
2015-08-05 21:16:01
454
原创 Mac10.10 terminal web开发环境配置之Apache详细小结
最近刚入手了Mac Pro，操作系统跟Windows不同，OS X Yosemite 操作系统，自身集成了apache＋php 环境，这比windows操作系统方便太多了，额，差不多捣鼓了一天，网上经验很多，但都不全，但我耗时也太久了吧，醉了醉了，郁闷，不过最终看到结果，还是开心了几把哈～今天就来分享下，10.10版本的apache配置，包括个人站点的设置，希望能让很多人少走弯路，一步到位，亲身实
2015-07-29 17:12:14
467
1
原创 Broswer内核简单小结
前端编程开发总会考虑浏览器的兼容性问题，今天索性总结下这方面的内核问题，列了大众用户较常用的浏览器……浏览器内核（rendering engine），rendering是渲染的意思，渲染网页，将代码转化为看得见的页面，也称为排版引擎，Trident:IE浏览器内核，360安全浏览器等（写到这里，明白为什么要考虑IE了，ＩＥ可以，很多网页测试也就可以了）Gecko:Mozil
2015-07-23 17:21:41
708
原创 web开发必备工具
在web求学的路中，以个人经验为基础，分享这份清单……工具：1.sublime text: 最先接触的是Adobe Dreamweaver, 我的web开发入门工具，它会有很多提示，功能还是强大的，但后来接触了sublime text后，基本就不用了，为什么呢？sublime text打开更快，这是我考虑的一个因素，而且界面简洁，没有什么多余元素，实时更新也快，比如说新建了个文件，能马上
2015-07-21 20:05:46
517
原创 前端之编码规范总结
随着web编码的接触时间增长，越来越注重代码的规范性，今天直接对它做一个小结……1. Tab键还是两个空格的选择，个人倾向于用Tab键，比较简单，但Tab键不同编辑器，显示的位置是不一样的，建议用双空格，这样不同编辑器打开都是一样的，还是看个人喜欢，主要在于统一；2.嵌套元素要学会缩进，例如 代码规范3.对于属性的定义，全部用双引号，统一性，如4.结束标签不可忽略，如；自闭合
2015-07-20 20:52:54
517
原创 html转义字符
在html网页编程时，有时候会用到转义字符，突然想为什么要用到转义字符，在html中有些符号也能输出，包括 ,，©，利用输入法，输入中文就可以得到符号了，那为什么还要用转义字符？当你需要在页面输出比如说，等网页标签时，就无法输出了，这时候就需要用到转义字符，这里列了一些比较常用的转义字符：
2015-07-19 17:23:59
650
原创 web tips——href跳转页面指定部分
当设计用户页面交互行为时，希望点击某区域，不是跳转页面，而是希望跳转至当前页面的某一部分，利用a便可实现……首先，明白的概念，超链接，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段，同时也包括ID名称。我们也可称之为“锚点”，，不过事先定义需要跳转部分的id名称。如：选择题填空题
2015-07-19 14:30:51
986
原创 CSS3设计边框忽隐忽现功能
css3功能很强大哈，实现动画功能很方便，今天在这里分享怎么实现类似星星眨眼，忽隐忽现，一亮一闪的功能……同样，我们先知道CSS3的几个属性：1. box-shadow:向框添加一个或多个阴影，box-shadow: 水平阴影距离(必须） 垂直阴影距离（必须） 模糊距离（可选） 阴影尺寸（可选） 颜色（可选） 阴影类型（可选）;如：box-shadow: 1em 2em 1
2015-07-18 12:01:19
1618
原创 js实现倒数计时器功能
正在学习js的路程中，今天知道了如何实现简单倒数计时的功能，比如说，可以用于设计考试定时功能，不是从0开始计时，而是从最后的规定时长开始，如02:00:00一直到00:00:00……现在开始学习，未设置天数的功能首先，我们要明白几个方法，1. setInterval( )方法可以按照指定的周期（以毫秒计）来调用函数或计算表达式，如setInterval(function(){}, 10
2015-07-12 19:40:02
6005
原创 web tips——radio单击区域
今天，小V为radio单击，只能点击圆圈才能选中寻找解决方法，怎么让它的单击区域变大，其中一个方法是label……首先，我们需要知道html标签的input type=“radio”，是一个单选按钮，如下图：如果仅是A. CSS ，那么它只能点击圆圈部分，才能变为实心点，也就是选中；那么显然这不符合用户心理，用户肯定希望点击的区域大一些，这样更为人性化；
2015-07-11 13:46:58
1489
原创 前端之实现Tab下条效果
改变点击Tab一栏状态改变的方法有很多种，在这里介绍其中比较简单基础的一个方法。首先要了解removeClass，addClass概念，以及jquery index() 方法编辑下条的style样式：.nav-line {border-bottom: 5px solid #EC6767;}1. 使用函数，如 $("nav li").click(function(obj)
2015-07-09 20:42:45
790
MindNodePro
2015-07-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人