摘要：
第一种 根据viewport设置maximum-scale缩放页面天猫的web app的首页就是采用这种方式去做的，以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了，这个方法简单粗暴，又高效。不过有部分同学使用过程中反应... 阅读全文
摘要：
(function(window){/* youku api : http://open.youku.com/tools 调用方法 : LM_youkuPop.open('XODI5Mzk3MDAw');*/var head = document.getElementsByTagName('hea... 阅读全文
摘要：
/* 兼容iphone4/4s */@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){}/* 兼容iphone5 */@media (device-height:568px) and (-webkit-min-de... 阅读全文
摘要：
先发效果图，加载东西的时候如果没有设计或者其它提示会降低用户体验，所以写了个简单的loading弹层。适用于触屏和pc页面。/* 页面进行ajax时 显示一个中间浮动loading @auther: LM @date: 2015-6-10 @rely: html5触屏 @fun: LM_loadin... 阅读全文
摘要：
触屏的click因为有双击判断所以有200ms的延迟，zepto里的touch.js兼容不好所以tap也没法直接用。gibhub上有个fastclick太大了。自己用touched写个简单的模拟tap事件，并在内部加上e.preventDefault();阻止系统默认行为。 /* 模拟Tab事件 ... 阅读全文
摘要：
http://www.w3school.com.cn/cssref/pr_box-sizing.aspbox-sizing: content-box|border-box|inherit;值描述content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和... 阅读全文
摘要：
今天xgo文章图片页上线用微信扫页面发现一个bug，页面可以双击放大缩小。找了半天原因，发现是图片描述设置了overflow-y引发的bug。建议在微信场景里满屏显示不能滚动的页面里慎用overflow-y。xgo文章图片页上线：m.xgo.com.cn/info/1213384.html 阅读全文
摘要：
RequireJS 2.0 正式发布×××××××××××××××××××××××××××××××××××××RequireJS入门（一）RequireJS入门（二）RequireJS入门（三）××× 阅读全文
摘要：
column的布局形式还没有使用过，后续的bug和解决方案有待检验。columncolumn-count：number； 设置内容分为多少栏显示column-width：长度单位；设置每一栏的宽度而不设定元素的宽度column-gap:长度单位;设置多栏之间的间隔距离column-rule:宽度，颜... 阅读全文
摘要：
mask demo效果演示：http://dtdxrk.github.io/game/css3-demo/mask.htmlmask 的属性：-webkit-mask-image:url | gradient /*可以使用图片或渐变作为遮罩层*/-webkit-mask-repeat:repeat ... 阅读全文
摘要：
游戏在线预览地址：http://dtdxrk.github.io/game/3d-dice/index.htmljs判断一个随机数大小的游戏。本来想用canvas做的，平面的生产一个点数，感觉没啥意思。结合CSS3来吧，正好温习一下css3的3d属性。CSS具体实现过程【CSS3练习】3D盒子制作 阅读全文
摘要：
perspective && perspective-originperspective是物体相对于画布的视距距离perspective-origin是物体在画布位置的中心视点transform3dtransform-origin 旋转中心 阅读全文
摘要：
先发个3D盒子最终效果图在线效果预览：http://dtdxrk.github.io/game/css3-demo/box-3d.html制作步骤1：创建基本结构分布把6个面定义到3×3的画布上，1和4暂且是重叠的。html结构比较简单： 1 2 3 4 5 6 CSS部分： *{ma... 阅读全文
摘要：
先上效果图：就是用js计算每个小圆的位置分布到大圆的边线上，然后在让大圆旋转起来。线上查看地址：http://dtdxrk.github.io/game/css3-demo/diffuse.html用到了上学时基础的数学知识 阅读全文
摘要：
transform 2d变形实例练习：练习了旋转 倾斜 缩放的功能 transform 阅读全文
摘要：
现在很多for Mobile的HTML5网页内都有快速滚动和回弹的效果，看上去和原生app的效率都有得一拼。要实现这个效果很简单，只需要在元素上加一行css代码即可：-webkit-overflow-scrolling : touch; 实际上，Safari真的用了原生控件来实现，对于有-webki... 阅读全文
摘要：
本来想的挺复杂实际操作了一下15分钟完成了，挺简单的。预览地址：http://dtdxrk.github.io/game/blackboard/index.html分享一下思路：1.创建画布2.添加按钮3.设置事件没啥好说的就这样吧。 blackboard chalkColor : whitepi... 阅读全文
摘要：
【canvas】Demo1scale缩放 图片 【canvas】Demo2 translate移动 图片 【canvas】Demo3 rotate旋转 rotate 阅读全文
摘要：
【canvas】Demo1 drawImagedrawImage(img,x,y); 图片 【canvas】Demo2 drawImagedrawImage(img,x,y)drawImage(img,x,y,w,h)drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) ... 阅读全文
摘要：
demo1 fillText strokeText绘制文字 fillText strokeText demo2字体 大小 粗细 字体 大小 粗细 demo3 文字对齐 textAlign textBaseline感觉没啥好说的http://www.w3school.com.cn/tags/... 阅读全文
摘要：
Demo1【绘制一条线】 demo 1 Demo2【改变线帽样式】 lineCap demo3【绘制矩形】 strokeRect demo4【圆形】 arc demo5【圆角矩形】 arcTo demo6【擦除】 clearRect demo7【二次贝尔曲线quadratic... 阅读全文
摘要：
今天看页面发现一个以前没用过的css属性text-align:justify，查了一下非常实用，是一个实现文本两端对齐的属性。使用前：使用后：看了一些文章还有结合inline-block+text-align:justify 对齐布局的，出于兼容的问题，我还是倾向浮动处理，有兴趣的可以自己搜一下。 阅读全文
摘要：
「rem」是指根元素（root element，html）的字体大小，好开心的是，从遥远的 IE6 到版本帝 Chrome 他们都约好了，根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢？IE9+，Firefox、Chrome、Safari、Opera 的主流版本都支持... 阅读全文
摘要：
CSS3 filter和IE的filter完全是两样东东。Filters主要是运用在图片上，以实现一些特效。（尽管他们也能运用于video上），不过我们在些只来讨论图片上的运用。语法 elm { filter: none | [ ]* } 其默认值是none，他不具备继承... 阅读全文
摘要：
文件命名在 web 项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号（-）是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符（i.e.//example.com/blog/my-blog-entryor//s.example.com/images/big-black-back... 阅读全文
摘要：
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。w3Schollhttp://www.w3school.com.cn/cssref/pr_transform.asp浏览器支持transform: none|transform-function... 阅读全文
摘要：
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。＜meta http-equiv="参数" content="参数变量值" /＞X-UA-Co... 阅读全文
摘要：
/*判断浏览器是否支持某个css属性*/function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle = SupportCss.opt.eleStyle; for(i;i<arr... 阅读全文
摘要：
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；Transition：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。w3school在线文档说明http://www.w3school.... 阅读全文
摘要：
CSS3的动画应用越来越多了，Animate.css一个从名字上就知道干什么的动画框架。github上的访问地址：http://daneden.github.io/animate.css/使用方法引用css 然后在需要动画效果的元素上添加animated和网页上显示的API的名字即可，比如：简单吧！... 阅读全文
摘要：
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；Animation主要是对元素实现了一些基本的动画效果，它只能应用在页面的DOM元素上。Animation：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个... 阅读全文
摘要：
计划今年要自己写几个游戏的demo，先从《砸地鼠》这种简单的入手。游戏思路卡通化前端组头像 两种状态（快乐&被砸）游戏时间1分钟微信接口，分享最终得分游戏规则前端组的肉蛋们气焰嚣张，是时候打击一下他们了。砸到不同的肉蛋会得到相应的分值。小月 +500一梦 +400莫格 +300军杰 +200小红 +... 阅读全文
摘要：
Viewport DEMO一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。一都主流的web app都是这么设置的，它的作用其实是故意舍弃viewport，不缩放页面，这样dpi肯定和... 阅读全文
摘要：
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：也可以连写：下面具体说下每个设置的作用：一、telephone你明明写的一串数字没加链接样式，而iPhone会自动把... 阅读全文
摘要：
CSS Media Queries直译过来就是“媒体查询”，我们可以通俗易懂的理解为根据媒体设备展示不同的样式。例如，你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中，这样，在不改变文档内容的情况下，不同的设备可以呈现不同的界面外观。看下这个在线演示，调整你的浏览器窗口尺寸，... 阅读全文
摘要：
//jQuery$("#select_city").find("option:selected");//zepto$("#select_city option").not(function(){ return !this.selected }) 阅读全文
摘要：
HTML 5 是一个新的网络标准，目标在于取代现有的 HTML 4.01, XHTML 1.0 and DOM Level 2 HTML 标准。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe... 阅读全文
摘要：
在线预览地址：http://dtdxrk.github.io/game/css3-demo/drawbox.html用到两个属性：一个是动画时间transition-duration: 0.8s;-moz-transition-duration: 0.8s;-webkit-transition-du... 阅读全文
摘要：
里面有两个demo，支持X横向和Y纵向翻转两个效果。对元素的布局有一定的讲究，需要分析一下demo的css。默认翻转速度为80，不要大于100ms。 【JQuery插件】扑克正反面翻牌效果 demo1 y轴 (css布局提示：背面默认隐藏 height为0 top是高度的一半也... 阅读全文
摘要：
先展示一下已经实现的效果：预览地址：http://dtdxrk.github.io/js-plug/LoadingBar/index.html看到手机上的浏览器内置了页面的加载进度条，想用在pc上。网上搜了一下，看到几种页面loading的方法：1.在body头部加入loading元素，在body页... 阅读全文