- 博客(182)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 Javascript闭包
摘要：“如果你不能向一个六岁的孩子解释清楚，那么其实你自己根本就没弄懂。”好吧，我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了。 越来越觉得国内没有教书育人的氛围，为了弄懂JS的闭包，我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释，当我看到stackoverflow上这一篇解答，我脑中就出现了一句话：就是这货没跑了！
2016-06-27 13:50:55
612
转载 函数节流（throttle）与函数去抖（debounce）
一、前言 以下场景往往由于事件频繁被触发，因而频繁执行DOM操作、资源加载等重行为，导致UI停顿甚至浏览器崩溃。 1. window对象的resize、scroll事件 2. 拖拽时的mousemove事件 3. 射击游戏中的mousedown、keydown事件 4. 文字输入、
2016-06-12 17:13:24
528
转载 移动端 web 开发调试 Weinre 调试
weinre的使用1.简介weinre是一款非常好用的远程调试工具。功能与网页浏览器的开发者工具基本类似，但这个工具更适合用于移动端web的调试。2.安装weinre基于nodejs，因此首先要安装nodejs，然后使用npm进行安装：npm -g install weinre3.运行weinre --httpPort 8081 --boun
2016-06-12 16:43:25
606
转载 利用html5的本地存储功能实现登录用户信息保存
html lang="en" class="no-js">head>meta charset="UTF-8" /> -->title>图书销售管理系统title>meta name="viewport" content="width=device-width, initial-scale=1.0">meta name="description" content="Login a
2015-12-02 09:39:43
22735
转载 sublimeText 快捷键
Ctrl+D 选词 （反复按快捷键，即可继续向下同时选中下一个相同的文本进行同时编辑）Ctrl+G 跳转到相应的行Ctrl+J 合并行（已选择需要合并的多行时）Ctrl+L 选择整行（按住-继续选择下行）Ctrl+M 光标移动至括号内开始或结束的位置Ctrl+T 词互换Ctrl+U 软撤销Ctrl+P 查找当前项目中的文件和快速搜索；输入 @ 查找文件主
2015-10-21 10:06:04
608
转载 js 事件委托
1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。也就是：利用冒泡的原理，把事件加到父级上，触发执行效果。好处呢：1，提高性能。我们可以看一个例子：需要触发每个li来改变他们的背景颜色。ul id="ul">
2015-07-23 11:22:50
449
转载 ==和=== 的区别
1、对于string,number等基础类型，==和===是有区别的1）不同类型间比较，==之比较“转化成同一类型后的值”看“值”是否相等，===如果类型不同，其结果就是不等2）同类型比较，直接进行“值”比较，两者结果一样2、对于Array,Object等高级类型，==和===是没有区别的进行“指针地址”比较3、基础类型与高级类型，=
2015-07-20 16:19:25
581
转载 js 图片懒加载
转载此文章就是为了了解懒加载的原理，实际工作中，我还是会用到jquery的lazyload.js实现图片的懒加载懒加载与预加载的基本概念。 懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。 预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。 两种技术的本质：两者的行为是相反
2015-07-16 15:57:17
1522
转载 JS 异步加载
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。如何解决这个问题呢,接下来将为你详细介绍下异步加载js三种实现方案,感兴趣的你可以参考下(1) defer，只支持IE defer属性的定义和
2015-07-13 14:01:01
482
转载 浏览器判断
除IE外都可识别 所有的IE可识别 仅IE6可识别 IE6以及IE6以下版本可识别 IE6以及IE6以上版本可识别 仅IE7可识别 IE7以及IE7以下版本可识别 IE7以及IE7以上版本可识别 仅IE8可识别 仅IE9可识别
2015-07-13 10:25:18
385
转载 图片延迟加载的实现
图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省流量。如果TAB中的图片较多，也同样可以应用于TAB中，当触发TAB时再进行图片的加载。图片
2015-07-06 15:32:54
659
原创 java 项目中H5 离线缓存
看来很多H5 离线缓存的资料，最后总结如下（针对 java 开发）1. 在web.xml 中添加配置代码 appcache text/cache-manifest 2. 新建appcache 文件（名称 index）CACHE MANIFEST #version 0.5CACHE: index.html
2015-07-06 14:14:48
1218
原创 报表自适应的办法
刚刚用morris.charts.js 写了一个手机端的统计，发现报表会默认加一个行内样式的宽和高，于是各种想想办法，$("canvas").attr("height","20"); $("canvas").css("height","20px"); 上诉都不能用，于是改为$("canvas").attr("style","width:20px;height:20px");于是
2015-06-16 17:27:25
613
转载 jQuery方法区别:click() bind() live() delegate()区别
click()，bind()，live()都是执行事件时使用的方法，他们之前是有一些区别的，我们在使用这些方法时应该根据需要进行选择。1.click()方法是我们经常使用的单击事件方法：$("a").click(function() { alert("hello");});当点击时，输出hello。2.click()方法是bind()方法的一种简
2015-06-15 14:31:47
608
转载 js 中的 prototype
如何在Javascript实现OO编程？恐怕最好的方式就是充分利用prototype属性。关于prototype的介绍有很多，我就不赘述了。比较基本的原理是，当你用prototype编写一个类后，当你new一个新的object，浏览器会自动把prototype中的内容替你附加在object上。这样，通过利用prototype，你也就实现了类似OO的Javascript。在Javascript中
2015-06-15 11:42:14
394
转载 jqueyr proxy()
JQuery.proxy(function,context):使用context代替function中的context。比如：var you = { type: "person", test: function(event) { $("#log").append( this.type + " " ); }$("#test"
2015-06-15 11:35:28
448
转载 移动端webapp应对不同屏幕尺寸
移动设备的用户越来越多，每天android手机的激活量都已经超过130万台，所以我们面向移动终端的WebAPP也开始跟进了。本文主要介绍webapp的开发与调试的相关知识和经验，以及给出几种可选的解决方案。一、基本概念（1） CSS pixels与device pixelsCSS pixels：浏览器使用的抽象单位， 主要用来在网页上绘制内容。device pixe
2015-06-11 16:07:45
1202
转载 前端开发优化
发现的一篇关于前端优化的文章，总结的很全面，要做到面面俱到很难，往往是想优化而没有时间去优化，就像我们公司，一个项目连着一个项目~新员工的培训都省了，还想优化前端啊，不过我真的想有机会和老大好好的整合下公司网站的前端代码~不过要把前端优化的工作放在平时的写代码中去，就不需要刻意的后期优化了。在项目开发中，后台需要搭建好框架，前端更是需要搭建好框架，并且在页面实现中得到实现，只有这样才能事半功倍。
2015-06-11 10:26:10
601
原创 fullPage.js api 介绍
简介fullPage.js是一个基于jQuery的全屏滚动插件，它能够很方便、很轻松的制作出全屏网站主要功能支持鼠标滚动支持前进后退和键盘控制多个回调函数支持手机、平板触摸事件支持 CSS3 动画支持窗口缩放窗口缩放时自动调整可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等兼容性fullPage.js 支持 IE8+ 及其他现代浏览器。
2015-06-10 13:42:25
850
转载 CSS3中的Transition属性详解
W3C标准中对CSS3的transition这是样描述的:“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”下面我们从最简单的语法和属性值开始一步一步来学习transition的具体使用：语法： 123
2015-06-10 10:27:11
1084
转载 js键盘事件全面控制详解
s键盘事件全面控制主要分四个部分第一部分：浏览器的按键事件第二部分：兼容浏览器第三部分：代码实现和优化第四部分：总结第一部分：浏览器的按键事件用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事
2015-06-05 11:13:13
708
原创 jquery delegate
我的第一个移动框架 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 哈哈哈哈哈哈啊哈哈 $("ul").delegate("li","click",function(){ $(this).css("color","red
2015-06-03 10:24:13
475
原创 js事件委托
$('body').on('click',null,function(e){if(!$(e.target).hasClass('sub-menu')){$(".open .sub-menu").css("display","none"); } });1，什么是事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委
2015-06-02 16:15:37
572
转载 IE8 透明度兼容性
FILTER:progid:DXImageTransform.Microsoft.Gradient使用 语法： filter:progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth) 属性： enabled:可选项。布尔值(Boolean)
2015-06-01 11:11:26
1031
转载 js 判断浏览器、客户端、设备
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return { //移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1
2015-04-24 11:03:52
514
原创 js 售磬效果
html 代码 js $(function(){ var s=""+""+""; $("#covers").append(s); $("#imgChangeCol").addClass("changeCol"); });css .mask_lay
2015-03-23 17:56:11
759
转载 Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中： addEventListener的使用方式： target.addEventListener(type, listener, useCapture); target： 文档节点、document、window 或 XMLHttpRequest。 type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”
2015-03-19 11:48:14
462
原创 浅谈 js 模仿手机的 动作
刚刚进入移动开发，对手机的动作总是抱有一种迷茫的感觉，刚刚找到一个很简单的动作，顿时其实也 PC 端差距不大：具体代码如下： function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchm
2015-03-19 11:35:36
705
转载 javascript中defer的作用
很多人都已经把 Javascript的用的炉火纯青了，但见到defer未必就知道他是做什么用的；很多人也都遇到过这样的问题，需要直接执行别且操作DOM对象的js 总是报找不到对象的错误，原因大家也都知道就是页面还有没有加载完毕，js的操作对象还在下载中。但很多人都不知道，添加defer标签就能轻而易举的解决这个问题。中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问
2015-03-19 10:26:30
423
转载 js 判断 屏幕大小
function a(){document.write("屏幕分辨率为："+screen.width+"*"+screen.height+""+"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight+""+"网页可见区域宽："+document.body.clientWidth+""+"网页可见区域高："+documen
2015-03-18 10:57:01
1353
原创 仿唯品会 点击加背景图片
一共两种办法：第一种：这种办法是一种很笨的办法，原因是我还是不熟悉很多属性，直接把背景图片放在img 的外层的 div 上。
2015-03-18 10:12:29
1467
转载 css3 来实现图片在指定容器内等比例缩放，并控制中上下左右居中
2011.02.22 于新城科技园。实现图片在指定容器内等比例缩放，并控制中上下左右居中，以前可以通过javascript 加css2 的办法来控制。随着css3的普及，现在介绍一种单纯通过css来进行控制。具体代码如下：[html] view plaincopy> head> meta charset
2015-03-17 13:58:19
3692
转载 8款最新超酷HTML5/CSS3特效及源码
1、CSS3/jQuery全屏立体焦点图 时尚大气jQuery是一个非常流行的Javascript框架，今天我们要分享一款基于jQuery和CSS3的焦点图动画，该jQuery焦点图插件是全屏立体的效果，看上去非常时尚和大气。而且，焦点图在图片滑动的时候非常流畅，性能应该也还不错。在线演示 源码下载2、HTML5/CSS3文字投影特效 乳白阴影文字效果
2015-03-09 09:29:37
960
原创 Html5 animation详解
1. @keyframe 无标题文档div{ width:100px; height:100px; background:red; animation:myfirst 5s;-moz-animation:myfirst 5s; /* Firefox */-webkit-animation:myfirst 5s; /* Safari and Chrome */-o-an
2015-03-02 13:19:16
1964
原创 (一)图片滑动组件 js+HTML5+css3
以前一直是做后台开发，后来转前端开发，也只是对对UI 设计后的图片进行代码化，对效果进行机械性能的搬动，俨然一个代码的搬运工，最近我准备深入的研究移动前端开发，希望自己不再是代码的搬运工，加油，谢谢大家。 图片滚动组件静态界面之： 无标题文档body{ margin:0px; padding:0px; overflow::hidden; backgroun
2015-02-05 16:37:00
1604
原创 css3图片墙
无标题文档 .body{ background-color:#e1e1e1; } .wrap{ margin:60px auto; width:1000px; } img{ width:200px;height:180px; transition: 2s; -moz-transition: 1s; /* Firefox 4 */
2015-02-02 12:18:59
552
转载 js 上传图片自适应大小
本地图片预览#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;}#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}function previewImage(file
2015-02-02 11:00:50
771
转载 IE8 兼容问题
1、圆角左上角、右上角、右下角、左下角（顺时针）/* Gecko browsers */-moz-border-radius: 20px 20px 20px 20px;/* Webkit browsers */-webkit-border-radius: 20px;/* W3C syntax */border-radius:20px;2、(十年积累)di
2015-01-21 17:36:48
957
原创 修复sub 和 sup 行间距的问题
sub,sup{ font-sise:75%; line-height:0; position:relative; vertical-align:baseline; } sub{ bottom:-0.25m; } sup{ top:-0.5em;}
2015-01-15 11:42:46
931
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人