- 博客(35)
- 收藏
- 关注
RSS订阅原创 浅谈Web数据存储
先看一张图片 这张图片对每一位前端开发来说都不陌生，话说Chrome的控制台真心好用啊！cookie、Local Storage、Session Storage、Web SQL、IndexedDB、Application Cache等html5新增内容看的一清二楚，免去了很多调试代码工作。不过这里还不全面还有ie下的userData及flash的SharedObject。cookieco...
2014-11-26 09:54:42
165
原创 canvas动画
canvas就像一个画板你画的每个东西都在一个板上没有元素的概念.canvas动画就是不断的重绘来实现的，也就是动画的每一帧都是一幅静态的图片。其实canvas动画无外乎三个步骤： 1.准备要画的元素及其位置颜色等等.... 2.用一个定时器不断改变元素的一些属性如位置 3.再用一个定时器清除画布，画变化中的元素 1.开始准备元素 /**画星星...
2014-11-25 17:27:19
119
原创 jquery的Deferred
Query Deferred主是是为了解决异步而生。也许我们对于Deferred可能不熟悉，但是我们必定对promise熟悉，这两着之间有紧密的联系又或者说deffered包含promise的所有方法，但是为什么还会有promise呢？我们接下来会介绍。 我们来看源码： 我们可以看到这是一个工厂函数，结果返回一个组装成的对像deferred，那么接下来我们看一下这个返回的defer...
2014-10-13 11:26:51
112
原创 jquery的回调对像Callbacks
我们在日常开发中很少会用到Callbacks，但是我为什么会这么急着介绍Callbacks呢，因为接下我想说一下promise，这两部分有密切的联系至于什么联系到介绍promise时我们会明白的。Callbacks它是一个多用途的回调函数列表对象，提供了一种强大的方法来管理回调函数队列。如下例子function fn1(){ alert(111)}function fn2...
2014-09-29 10:05:49
116
原创 读jquery数据缓存
读jquery数据缓存数据缓存在jquery中很重要，可能平时你用的未必多，但是在jquery内部很多重要模块都有用到它，记得我们之前分析过的队列queue有用到数据缓存，还有一个很重要的模块也会用到数据缓存那就是事件。对于对比data和attr及prop最大优点那就是防止内存泄露了。jquery源码里有很多设计很巧妙的点，都值得我们去揣摩和学习的。那我们现在开始读jquery数据缓存源...
2014-09-22 17:36:04
102
原创 jquery的追溯
我们都很熟悉jquery中的end()方法就是回到上一级的节点指向如下图： 我们会考虑为什么呢，原理是什么？我们接着看下边的例子也许能发现点什么： 这里我们会发现其实$(".table").find(".cn-radio") 的属性“prevObject”指向的是 $(".table")。 说到这里我们就要说到我们jquery里栈和追溯源码了。pushStack...
2014-09-16 13:50:59
130
原创 看jquery源码更好使用API
看jquery源码更好使用API看过源码我们会发现其实jquey中有很多很好用的api我们没有使用过，今天我们一起看一下队列(queue)的源码，看一下都有哪些好用的API。大纲如下图： queue有三个工具方法： queue,dqueue,_queueHooks，四个实例方法 ：queue,dqueue,clearQueue,promise。jquery中很多模块都会同时有同名的...
2014-09-10 12:39:56
156
原创 5个实用而不常用的git操作
git stash --场景：如果不想提交只完成了一半的代码，但此时必须去修改一个紧急Bug 本地有修改，此时又需要pull远程代码，有时会因为修改了同一个文件导致无法pull，git提示可能有冲突无法merge，请先提交本地修改。 如果你还不想提交修改怎么办？就git stash吧，会把你的修改暂存，隐藏起来，然后你就可以pull了git stash pop --场景：bu...
2014-03-20 17:52:44
104
原创 解读jquery的extend
jQuery的extend方法很有用，jquery的很多工具方法，和实例方法都是通过extend实现的。我们一起来看一下这个方法是怎么写的。 jQuery.extend = jQuery.fn.extend = function() {var options, name, src, copy, copyIsArray, clone,3target = arguments[0]...
2014-03-20 17:24:02
65
原创 简单瀑布流
老是有一些老同事跟我说，我想做个瀑布流怎么做，我说网上有组件啊，回答总是说我不需要用异步接口，我只需要把我静态demo转成瀑布流样式就可以了，我就简单做了一个，我把JS放到load 事件里主要是怕图片宽高不确定的情况下用。 $(window).on("load",function(){ var waterfalls ={ init:function(...
2014-03-19 20:40:54
60
原创 页面性能优化
以前的老大说过一句话，一个页面谁都能做。关键是谁能做好，一个好是很关键的，首先是细节处理的好，性能优化的好。性能优化越来越重要，尤其是终端设备越来越普及的今天，我也看了好多这方面的资料，总结一下有以下几条:1> 减少http请求数（减小css,js和图片的数量，据资料说明相同网速的情总下100kb的图片的下载要比两个50kb的速度要快）2> 减少浏览器重绘和重排的次数（重绘会...
2014-03-19 15:02:33
76
原创 最简单的模版引擎
varTemplateEngine=function(html, options){var re =/<%([^%>]+)?%>/g, reExp =/(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code ='var r=[];\n', cursor =0;var add =function(line, js){ ...
2014-02-28 15:31:07
100
原创 移动调试-android
做手机端最麻烦的就是调试，不如在PC端有chrome下的开发工具还有firebug用着可以很方便的调试。所以这前我都是在电脑上做好页面用手机扫描二维码来测试页面碰到手机上和PC上表现不同的如电脑上表现好的，到手机上出现各种诡异的现像那头就大了。对于androi手机我们也可以像电脑上chrome下的开发工具一样看到源码然后调试看chrome给的官方文档https://develope...
2014-02-26 10:51:17
61
原创 math中的asin的应用
在上篇文章我们用math中的atan2来判断鼠标在一个区块的位置，接下来我们一起来学习一下math中的asin的应用。先来看一下w3school的中的定义Math.asin(x)返回x 的反正弦值。返回的值是 -PI/2 到 PI/2 之间的弧度值。现在我们已经明白asin的用法了，再来看一我们的一个应用场景吧，在canvas里有一个rotate(x)方法x是0-360deg的...
2014-02-19 14:01:40
2582
1
原创 math中atan2的应用
在双十二活动中，视觉要求实现一个鼠标跟随运动的的效果，就像“觉”的那个效果类似其实原理很简单，看鼠标从哪个方向进的及从哪个方向出的，然后区块里绝对定位的浮层就可以根据鼠标方向运动;如：在鼠标进入事件中判断鼠标从左边进入区块那么定位层就从left:区块宽走到区块零，在鼠标离开事件中判断鼠标是从上边离开的那么定位层就从top:零走到负的区块高度就可以的。是不是很简单呢，但是有一个问题就是...
2014-02-18 17:57:43
406
原创 移动开发小技巧
1.IOS关闭键盘自动大写：对input属性autocapitalize="off".2.IOS禁止用户保存/复制图片对img设置或都禁止用户在新窗口打开页面-webkit-touch-callout:none;3.IOS禁止用户选中文字对文字标签设置-webkit-user-select:none ...
2014-02-17 14:08:50
68
原创 移动页面最佳实践
移动开发页面要写一些media和link 最主要的是 viewport<media name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/> 还有一些meida(注意这些都是IOS设备下)：IOS桌面图标启动是否是全屏值有ye...
2014-02-17 13:57:00
86
原创 正则表达式学习
在工作中正则用得好会省了我们好多麻烦，但是我只会用一些简单的正则，所以我是菜鸟，话不多说我们一起来学习怎么使用正则吧。 1>捕获不捕获正则中用()就是捕获如：var str="abcdefg";var reg=/a(b)/g;var result = reg.exec(str);返回：["ab", "b"]会把正则中()中匹配的内容存储起来 2>反...
2014-02-14 17:41:31
84
原创 对于android手机2px的解决方案
最近做了一个H5的活动页面发现了一个问题就是对于有边框的列表项如有底框的列表项会出现 相邻的两个列表项中的一个边框变成2px:如图：;有三个解决方案(1)把border-top-color:#fff;把上边框定义成白色的(2)把 border换成box-shadow(3)用list项的after属性定义边框然后再用scale(0.5)(推荐最后这项，因为这项也可以解决在io...
2014-02-14 17:17:18
158
原创 多行文字溢出时自动转成”...“
.multi-line{ word-break: break-all; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
2014-02-14 17:03:38
87
原创 弹性布局（box-flax）
弹性布局有以下样式(1),dispaly:-webkit-Box/-moz-box（用于父容器上)(2),(-webkit-/-moz-)box-orient:horizontal/vertical(用于父元素)(3),(-webkit-/-moz-)box-pack:center/justify(用于父元素)(4),(-webkit-/-moz-)box-flax:N(用于子元素...
2013-06-28 16:04:27
435
原创 半透明层
在估项目是用opacity做半透明层时总遇到一个恼人的问题就是父容器半透明了，子窗口也会半透明;后来发现css3提供了一个rgba挺管用的div{ background:rgba(255,0,0,0.5);}这个对于除IE外的高级浏览器都支持对于IE可以用滤镜div{ filter:progid:DXImageTransform.Microsoft.gr...
2013-02-18 14:58:43
79
原创 设置iframe高度的问题
对于iframe高度的问题，需要分两类，第一种是同域的父页面和子页面解决方法是假如iframe的ID是iframeExpvar newIframe = docment.getElementById("iframeExp");function setHeight(){ var doc=newIframe.contentWindow.document; var maxH...
2013-02-18 14:28:47
170
原创 去掉页面中滚动条
最近做项目时PD提出交互就是弹出层弹出的时候把页面的滚动条去掉，起初想着很简单在body上加overflow="hidden"就可以了，实际上是不行的，后来查了一些文档这个还有html元素相关：只有你设置html{overflow:visible;} body{overflow的值}才能传递到html{}中去，设置了body{overflow:hidden}，还会出现滚动条，不过这个滚动条...
2013-01-27 15:27:52
94
原创 验证码刷新在firefox中的问题
问题：在firefox中相同URL不去访问，所以在刷新验证码时就出问题了，不去访问servlet。 解决办法如下： function refresh(){ //重新获取验证码图片的src属性 document.getElementById("imageField").src='/servlet/MyGraphics'+'?...
2012-12-09 22:21:47
155
原创 ShareObject使用
ShareObject,顾名思义共享对象,而通常意义上的共享，从B/S结构上来讲,无非是客户端（浏览器端）的共享和服务器端的共享了,不错,ShareObject刚好份演了这两种角色。而且ShareObject也是按此进行了两种分类,一类是LSO——Local Share Object（本地共享对象）其实类似于cookie，而另一种RSO——Remote Share Object(远程共享对象) 我...
2012-09-18 11:04:39
241
原创 客户端获得上传图片的fileSize
最近项目中有用到，用file控制上传图片前验证图片的大小的问题，查过了很多文件，发现比较麻烦，因为这个存在兼容性问题，对于IE和火狐有不同的处理。火狐下可以直接获得上传文件的大小进行判断：fileupload.files[0].fileSize；ie下就不同了，首先需要获得本地文件的路径，开启安全设置ActiveX功能后，才可以获取文件大小，但是如果客户去用了，还需要去开启什么Active...
2012-09-18 10:54:12
194
原创 关于iframe的操作
iframe是我们工作中经常用的东西.我把我的理解整理一下记录一下。首先要说的访问iframe用contentWindow和contentDocument，contentDocument有兼容性问题在chrome下是不行的。contentWindow兼容性比较好，所有的浏览器都支持，但是必须用到服务器下才可以。比如要让一个iframe自适应高度的话就可以iframe.height ...
2012-09-11 15:55:52
82
原创 完美运动框架
//获得样式function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; }}//运动函数function ...
2012-09-10 11:59:25
67
原创 面向对像的拖拽
function Drag(obj){ this.oBox= document.getElementById(obj); this.disX =0; this.disY =0; var slef =this; this.oBox.onmousedown=function(ev){ self.dragDown(ev) }}Dra...
2012-09-10 11:26:46
62
原创 正则表达式
正则对我来说是一个难题，最近在学习它，有了一点点收获，总结一下首先认识了，\d指的是数字，\w指的是数字字母及下划线，\s指的是空格对是大写的\D,\W,\S正好相反.其次是量词，*是指0到任意数，+指的是1到任意数{n,m}指的是最少n个数，最多m个数。对于区间的[0-9]指的是0-9中的一个数[a-z]指a-z任一个字母,对于区间中的^指的是非对于区间外的^指的是以什么开头，相...
2012-09-10 11:10:41
47
原创 cookie操作
这里是cookie的设置，获得，及移除的一些简单操作;function setCookie(name,value iDay){ var sDate = new Date(); sDate.setDate(sDate.getDate() + iDay); document.cookie=name + "=" + value + ";expries="+ sDa...
2012-09-10 10:46:04
43
原创 取得元素的样式
记一个有用的函数，我们平时都是用offsetWidth,offsetHeight取得元素的宽高，但是当元素有border、padding、margin，在做动画时会出现一些问题。所以我们可以写一个函数获得样式里写的宽高。function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[a...
2012-09-10 10:38:04
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人