HTMl5自由者

原创 啊哈：HTML5自由者博客搬家说明

原创 Canvas——滑杆操控图片放大缩小

您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.getElementById("scale-range")

原创 离屏Canvas——制作水印图片

您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.ge

原创 离屏Canvas——制作放大镜效果

您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var offCanvas = document.getElementById("offCanvas")

原创 Lufylenged引擎学习——LGraphics

（一）在一个LSprite上画一张图，new另一个Sprite进行图片的mask效果 ，效果如下： loading...var loader; init(50,"mylegend",500,350,main);function main(){ loader = new LLoader(); loader.addEventListener(L

原创 纯CSS3实现滑动开关效果

实现效果如下：HTML结构代码：      CSS代码：/*表单开关样式*/.ui-switch {    position: absolute;    font-size: .16rem;    right:0.07rem;    top: 50%;  

原创 Lufylenged引擎学习——LSprite

LSprite:创建一个新的 LSprite 实例。 LSprite 类是基本显示列表构造块：一个可显示图形并且也可包含子项的显示列表节点。var loader; init(50,"mylegend",500,350,main);function main(){ loader = new LLoader(); loader.ad

原创 px值转rem值的Sublime Text 3自动完成插件

一个CSS的px值转rem值的Sublime Text 3自动完成插件。插件效果如下：安装 克隆项目   https://github.com/hyb628/cssrem.git进入packages目录：Sublime Text -> Preferences -> Browse Packages...复制下载的cssrem目录到刚才的packges目录里。重启S

原创 Lufylenged引擎学习——LTextField

【 LTextField 】创建新的 LTextField 实例。在创建 LTextField 实例后，调用父 LSprite 对象的 addChild() 或 addChildAt() 方法可将 LTextField 实例添加到显示列表中。 LTextField 类的方法允许您设置、选择并操作在创作过程中或运行时创建的动态或输入文本字段中的文本。（一）利用LTextField

原创 Lufylenged引擎学习——LLoader、LBitmap

FPS（Frames Per Second）：每秒传输帧数。【代码练习】LLoader类可用于加载图像（JPG、PNG或GIF）文件。使用load（）方法来启动加载。LLoader.load('URl','bitmapData');LEvent COMPLETE  图片加载完成事件l

原创 使用Fiddler对手机应用进行抓包测试

手机应用的抓包测试相对于PC上要麻烦一些。以下内容来自公司QA的指导，感谢~需要的软件：抓包工具FiddlerWIFI共享工具：猎豹免费WIFI （使用360WIFI等均可，只要保证在同一局域网下就都可以，连接同一个路由器也可以）现在开始真实的抓包：1、启动Fiddler，打开菜单栏中的 Tools > Fiddler Options2、打开Fiddler Opti

原创 HTTP调试工具推荐：Fiddler

Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。Fiddler的工作原理Fiddler 作为系统代理，当启用Fiddler 时，IE 的PROXY 设定会变成127.0.0.1:8888。所有的来自互联网服务的HTTP

转载 HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理

又很久没有更新博客了，在这段时间里发生的事还蛮多的，回想起来才发现时间过得好快啊。至于博客嘛，天天都会关注，一来想看看大家是否写了一些评论，二来想看看大神们（如lufy，浅墨，雾央，Himi等）有没有写新的文章。不过最近没有什么新“发明”，所以就没什么好写的了~Ok，进入正题。一，说在前面的话最近有的朋友说他们很喜欢原生的javascript的代码，不喜欢看用引擎封装后

原创 HTML5的画布：Paths

HTML5的画布路径是一系列的点与点之间的绘图指令。例如，一系列的点用线在它们之间，或者与它们之间的电弧。路径用来绘制多种类型的形状（线，圆，多边形等）的HTML5画布上的，所以要理解这个核心概念是很重要的。开始和关闭路径路径开始和结束时使用的2D上下文函数调用beginPath（）和closePath（） ，就像这样：var canvas = document.getEle

原创 HTML5画布: clearRect()

clearRect（）是用来清除画布的一个矩形。var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");context.fillStyle = "#ff0000";context.fillRect(10,10, 100,100);context.strokeStyle

原创 HTML5的画布：Stroke（笔触）和Fill（填充）

每当一个HTML5画布上绘制形状，有两个属性，你需要设置：1、Stroke2、Fill笔触和填充决定的形状如何绘制。Stroke（笔触）是一个形状的轮廓。Fill（填充）是在形状内部的内容。下面这图是绘制了一个蓝色外轮廓和绿色填充的矩形（实际上是两个矩形）：下面试实现的代码：// 1. wait for the page to be fully loaded

原创 HTML5画布概述

本文提供了HTML5的画布基本用法的概述。概述被分成两部分：声明一个HTML5 canvas元素。绘图画布元素的图形。声明canvas元素首先，让我们来看看如何在一个HTML页面声明canvas元素：<帆布ID =“EX1”WIDTH =“500”HEIGHT =“150” 风格=“边界：1px的固体#CCCCCC;”> 不支持HTML5画布

转载 前端：将网站打造成单页面应用SPA

前言不知你有没有发现，像Github、百度、微博等这些大站，已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转，然后使用HTML5的新API修改了Url，你可以在F12的Network面板里发现这个秘密。 这项技术并没有特别标准的学名，大家都称呼为Pjax，意为PushState + Ajax。这并不完全准确，因为还有Hash + Ajax等方法，但为了方便，我们下文

转载 手机淘宝的flexible设计与实现

看到小黑的文章 关于webapp中的文字单位的一些捣腾 感觉很赞。尤其是，他提到了手机淘宝的meta，所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始，全面推行flexible设计。什么叫flexible呢？其实flexible就是responsive的低端形态和基础。对我们来说，最直观的感受就是，在超宽屏幕上，网页显示不会两边留白。以前pc时代大家经常讲的流体布局，其实就是

原创 SVG画圆形进度条

HTML5自由者 SVG画圆形进度条 #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-d

原创 移动端手机横屏提示

【项目地址】： http://dwz.cn/RYgq7【手机二维码】：【效果】：【代码】 为了更好的体验，请使用竖屏浏览 /* 样式放在结尾，防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg)

原创 Grunt学习

http://www.cnblogs.com/yexiaochai/p/3603389.htmlGruntfile这个文件尤其关键，他一般干两件事情： ① 读取package信息 ② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面） Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面 module.ex

转载 webkit内核浏览器的CSS写法

-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canva

转载 CSS3 display:flex和display:box有什么区别？

前者是flex 2012年的语法，也将是以后标准的语法，大部分浏览器已经实现了无前缀版本。后者是2009年的语法，已经过时，是需要加上对应前缀的。所以兼容性的代码，大致如下display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */display: -moz-box; /* Firefox 17- */display: -w

原创 元素水平垂直居中【弹性布局 || Translate】

/*** 游戏排行版*/.yblist { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.9; z-index: 999;}/*弹性布局方法*/.flex { display:-webkit-box; d

原创 Rem 字体设置学习

（2）JS方法动态计算根元素的字体大小： 【淘宝首页：m.taobao.com】(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recal

原创 判断是否微信 IPhone 打开

/*** 判断是否微信* @returns {boolean}*/function isWeiXin(){ var ua =window.navigator.userAgent.toLowerCase(); var s = ua.match(/MicroMessenger\/([\d.]+)?/i); if(s == null){ return fal

原创 使用debug.js调试手机网页

创作背景手机网页兼容性与ie相比，有过之无不及，调试的时候，我们会使用console.log，但是手机上看不到打印出来的信息。所以只好各种alert，但alert总显得不那么优雅。初学js的时候就alert，现在还在各种alert。而且alert后还要点击确定，如果循环alert，那就悲剧了，一直点确定吧，可能手机还因此搞死机了。那么有没有一种显得更加优雅的方式去输出调试信

转载 window.location的属性

window.location 对象所包含的属性 属性描述hash从井号 (#) 开始的 URL（锚）host主机名和当前 URL 的端口号hostname当前 URL 的主机名href完整的 URLpathname当前 URL 的路径部分port当前 URL 的端口号protocol当前 URL 的协议search从问号 (?) 开始的 URL（查询部分）window.location.hash

转载 CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框（Facebox）

.wrap { width: 200px; height: 200px; border: 15px solid rgba(0,0,0,0.3); background: #FA0; margin: 0 auto; col

原创 CSS3 Loading效果

Loading .spinner > div { width:15px; height:15px; background-color: #5998CD; border-radius: 100%; display: inline-

原创 input只能输入文本框

原创 Sublime的SVN插件

http://www.cnblogs.com/kingwell/p/3557579.html使用快捷方式：[alt+c] : commit current file.[alt+u] : update current file.[alt+r] : revert current file.找不到install 是sublime

原创 图片生成database 64

<!DOCTYPE html 如何用HTML5的FileReader生成Data Url function buildDataUrl(source) { var file = source.files[0];

原创 CSS3发光字体几种效果

[CSS3] Neon Glow - CodePen /*setup*/*{ margin: 0; padding: 0;}@font-face { font-family: 'Monoton'; font-style: normal; font-weight: 400; src: local('Monoton'), local('Monoton-R

原创 戴尔一屏一屏 3D效果

http://dell.kedaibiao.cn/xps13-dino/special.html  戴尔一屏一屏 3D效果http://www.oschina.net/news/49651/best-jquery-360-degree-image-rotation-plugins  汽车360度旋转项目

原创 背景渐变 兼容IE

CSS 实现元素背景渐变 .demo { width:100%; height:200px; border:solid 1px #213c7c; background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c)); background: -

原创 判断一个类名或者元素是否存在的思路

if ($('.ybvideo ul').length > 0){ // code...}

原创 多行文本超出 JS省略号...

(function($) { $(".first-button").on("click", function(event){ $(".first-text").ellipsis(200); $(this).hide(); });})(jQuery);(function($) { $.fn.ellips

原创 CSS3多行显示省略号...

不用js也能控制第让他控制第几行省略：text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;