HTML5自由者
文章平均质量分 66
有心就有快乐 哈
一喵呜
这个作者很懒,什么都没留下…
展开
-
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原创 2015-08-12 16:24:16 · 8428 阅读 · 2 评论 -
Lufylenged引擎学习——LLoader、LBitmap
FPS(Frames Per Second):每秒传输帧数。【代码练习】LLoader类可用于加载图像(JPG、PNG或GIF)文件。使用load()方法来启动加载。LLoader.load('URl','bitmapData');LEvent COMPLETE 图片加载完成事件l原创 2015-08-11 17:16:59 · 1723 阅读 · 0 评论 -
多行文本超出 JS省略号...
(function($) { $(".first-button").on("click", function(event){ $(".first-text").ellipsis(200); $(this).hide(); });})(jQuery);(function($) { $.fn.ellips原创 2015-06-20 17:44:36 · 2750 阅读 · 0 评论 -
背景渐变 兼容IE
CSS 实现元素背景渐变 .demo { width:100%; height:200px; border:solid 1px #213c7c; background: -webkit-gradient(linear, 0 0, 0 100%, from(#80c1e7), to(#213c7c)); background: -原创 2015-06-20 17:48:48 · 3190 阅读 · 0 评论 -
戴尔一屏一屏 3D效果
http://dell.kedaibiao.cn/xps13-dino/special.html 戴尔一屏一屏 3D效果http://www.oschina.net/news/49651/best-jquery-360-degree-image-rotation-plugins 汽车360度旋转项目原创 2015-06-20 17:49:53 · 958 阅读 · 0 评论 -
图片生成database 64
<!DOCTYPE html 如何用HTML5的FileReader生成Data Url function buildDataUrl(source) { var file = source.files[0];原创 2015-06-20 17:52:33 · 3686 阅读 · 0 评论 -
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原创 2015-06-20 17:54:25 · 668 阅读 · 0 评论 -
input只能输入文本框
原创 2015-06-20 17:58:12 · 818 阅读 · 0 评论 -
CSS3 Loading效果
Loading .spinner > div { width:15px; height:15px; background-color: #5998CD; border-radius: 100%; display: inline-原创 2015-06-20 18:01:33 · 1085 阅读 · 0 评论 -
CSS3制作半透明边框记得以前Facebook有段时间使用了非常多的半透明边框(Facebox)
.wrap { width: 200px; height: 200px; border: 15px solid rgba(0,0,0,0.3); background: #FA0; margin: 0 auto; col转载 2015-06-20 18:03:27 · 1007 阅读 · 0 评论 -
window.location的属性
window.location 对象所包含的属性 属性描述hash从井号 (#) 开始的 URL(锚)host主机名和当前 URL 的端口号hostname当前 URL 的主机名href完整的 URLpathname当前 URL 的路径部分port当前 URL 的端口号protocol当前 URL 的协议search从问号 (?) 开始的 URL(查询部分)window.location.hash转载 2015-06-20 18:09:24 · 2003 阅读 · 0 评论 -
使用debug.js调试手机网页
创作背景手机网页兼容性与ie相比,有过之无不及,调试的时候,我们会使用console.log,但是手机上看不到打印出来的信息。所以只好各种alert,但alert总显得不那么优雅。初学js的时候就alert,现在还在各种alert。而且alert后还要点击确定,如果循环alert,那就悲剧了,一直点确定吧,可能手机还因此搞死机了。那么有没有一种显得更加优雅的方式去输出调试信原创 2015-06-20 18:17:08 · 3701 阅读 · 0 评论 -
判断是否微信 IPhone 打开
/*** 判断是否微信* @returns {boolean}*/function isWeiXin(){ var ua =window.navigator.userAgent.toLowerCase(); var s = ua.match(/MicroMessenger\/([\d.]+)?/i); if(s == null){ return fal原创 2015-06-20 18:18:38 · 2279 阅读 · 0 评论 -
Rem 字体设置学习
(2)JS方法动态计算根元素的字体大小: 【淘宝首页:m.taobao.com】(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recal原创 2015-06-20 18:26:49 · 2308 阅读 · 0 评论 -
元素水平垂直居中【弹性布局 || Translate】
/*** 游戏排行版*/.yblist { position: absolute; width: 100%; height: 100%; background: #000; opacity: 0.9; z-index: 999;}/*弹性布局方法*/.flex { display:-webkit-box; d原创 2015-06-20 18:29:28 · 2103 阅读 · 0 评论 -
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转载 2015-06-20 18:31:16 · 2565 阅读 · 0 评论 -
webkit内核浏览器的CSS写法
-webkit-tap-highlight-color: transparent; Mobile上点击链接高亮的时候设置颜色为透明 -webkit-user-select: none; 设置为无法选择文本 -webkit-touch-callout: none; 长按时不触发系统的菜单, 可用在图片上加这个属性禁止下载图片 :-webkit-full-screen canva转载 2015-06-20 18:39:09 · 1444 阅读 · 0 评论 -
Grunt学习
http://www.cnblogs.com/yexiaochai/p/3603389.htmlGruntfile这个文件尤其关键,他一般干两件事情: ① 读取package信息 ② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面) Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面 module.ex原创 2015-06-20 18:42:00 · 874 阅读 · 0 评论 -
移动端手机横屏提示
【项目地址】: http://dwz.cn/RYgq7【手机二维码】:【效果】:【代码】 为了更好的体验,请使用竖屏浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg)原创 2015-06-21 17:40:42 · 7599 阅读 · 1 评论 -
SVG画圆形进度条
HTML5自由者 SVG画圆形进度条 #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-d原创 2015-06-21 17:54:31 · 6936 阅读 · 0 评论 -
手机淘宝的flexible设计与实现
看到小黑的文章 关于webapp中的文字单位的一些捣腾 感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是转载 2015-07-14 14:49:34 · 1976 阅读 · 0 评论 -
前端:将网站打造成单页面应用SPA
前言不知你有没有发现,像Github、百度、微博等这些大站,已经不再使用普通的a标签做跳转了。他们大多使用Ajax请求替代了a标签的默认跳转,然后使用HTML5的新API修改了Url,你可以在F12的Network面板里发现这个秘密。 这项技术并没有特别标准的学名,大家都称呼为Pjax,意为PushState + Ajax。这并不完全准确,因为还有Hash + Ajax等方法,但为了方便,我们下文转载 2015-07-31 11:22:34 · 2458 阅读 · 0 评论 -
HTML5画布概述
本文提供了HTML5的画布基本用法的概述。概述被分成两部分:声明一个HTML5 canvas元素。绘图画布元素的图形。声明canvas元素首先,让我们来看看如何在一个HTML页面声明canvas元素:<帆布ID =“EX1”WIDTH =“500”HEIGHT =“150” 风格=“边界:1px的固体#CCCCCC;”> 不支持HTML5画布原创 2015-08-06 14:15:55 · 2300 阅读 · 0 评论 -
HTML5的画布:Stroke(笔触)和Fill(填充)
每当一个HTML5画布上绘制形状,有两个属性,你需要设置:1、Stroke2、Fill笔触和填充决定的形状如何绘制。Stroke(笔触)是一个形状的轮廓。Fill(填充)是在形状内部的内容。下面这图是绘制了一个蓝色外轮廓和绿色填充的矩形(实际上是两个矩形):下面试实现的代码:// 1. wait for the page to be fully loaded原创 2015-08-06 14:35:01 · 10797 阅读 · 0 评论 -
HTML5画布: clearRect()
clearRect()是用来清除画布的一个矩形。var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");context.fillStyle = "#ff0000";context.fillRect(10,10, 100,100);context.strokeStyle原创 2015-08-06 14:46:09 · 5604 阅读 · 0 评论 -
HTML5的画布:Paths
HTML5的画布路径是一系列的点与点之间的绘图指令。例如,一系列的点用线在它们之间,或者与它们之间的电弧。路径用来绘制多种类型的形状(线,圆,多边形等)的HTML5画布上的,所以要理解这个核心概念是很重要的。开始和关闭路径路径开始和结束时使用的2D上下文函数调用beginPath()和closePath() ,就像这样:var canvas = document.getEle原创 2015-08-06 14:58:17 · 1357 阅读 · 0 评论 -
HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理
又很久没有更新博客了,在这段时间里发生的事还蛮多的,回想起来才发现时间过得好快啊。至于博客嘛,天天都会关注,一来想看看大家是否写了一些评论,二来想看看大神们(如lufy,浅墨,雾央,Himi等)有没有写新的文章。不过最近没有什么新“发明”,所以就没什么好写的了~Ok,进入正题。一,说在前面的话最近有的朋友说他们很喜欢原生的javascript的代码,不喜欢看用引擎封装后转载 2015-08-07 14:03:20 · 2078 阅读 · 0 评论 -
HTTP调试工具推荐:Fiddler
Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求,允许你监视,设置断点,甚至修改输入输出数据,fiddler包含了一个强大的基于事件脚本的子系统,并且能够使用.net框架语言扩展。Fiddler的工作原理Fiddler 作为系统代理,当启用Fiddler 时,IE 的PROXY 设定会变成127.0.0.1:8888。所有的来自互联网服务的HTTP原创 2015-08-10 17:01:01 · 1633 阅读 · 0 评论 -
使用Fiddler对手机应用进行抓包测试
手机应用的抓包测试相对于PC上要麻烦一些。以下内容来自公司QA的指导,感谢~需要的软件:抓包工具FiddlerWIFI共享工具:猎豹免费WIFI (使用360WIFI等均可,只要保证在同一局域网下就都可以,连接同一个路由器也可以)现在开始真实的抓包:1、启动Fiddler,打开菜单栏中的 Tools > Fiddler Options2、打开Fiddler Opti原创 2015-08-10 17:03:52 · 3727 阅读 · 0 评论 -
利用Apache配置本地 自定义域名
第一步:配置 httpd.conf 开启 虚拟主机 配置模块 去掉 " Include conf/extra/httpd-vhosts.conf " 前面的" # "# Virtual hosts Includeconf/extra/httpd-vhosts.conf 第二步:配置 httpd-vhosts.conf 开始 将自定义的本地域名原创 2015-06-20 14:20:19 · 4289 阅读 · 0 评论 -
移动端开发心得(2015.3.1更新)
移动端开发心得原创 2015-02-27 01:50:55 · 4603 阅读 · 2 评论 -
NodeJS、NPM安装配置步骤(windows版本)
1、windows下的NodeJS安装是比较方便的(v0.6.0版本之后,支持windows native),只需要登陆官网(http://nodejs.org/),便可以看到首页的“INSTALL”按钮,直接点击就会自动下载安装了。2、安装过程基本直接“NEXT”就可以了。(windows的安装msi文件在过程中会直接添加path的系统变量,变量值是你的安装路径,例如“C转载 2014-11-07 17:31:50 · 11228 阅读 · 0 评论 -
attribute和property的区别
DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。attribute是一个特性节点,每个DOM元素都有一个对应的attr原创 2014-09-09 15:30:11 · 1323 阅读 · 0 评论 -
Hammer.js 移动设备触摸手势js库
hammer.js是一个多点触摸手势库,能够为网页加入Tap、Double Tap、Swipe、Hold、Pinch、Drag等多点触摸事件,免去自己监听底层touchstart、touchmove、touchend事件并且写一大堆判断逻辑的痛苦。hammer.js不但支持触摸屏设备的浏览器,在桌面浏览器上,也能将鼠标的点击当做触摸,方便开发人员在桌面浏览器上调试。这是一个专为触摸手势而生的j转载 2014-09-12 17:17:01 · 5351 阅读 · 0 评论 -
DOM对象属性(property)与HTML标签特性(attribute)
HTML中property与attribute是极易混淆的两个概念。大多数时候这两个单词都翻译为“属性”,为了区分二者,一般将property翻译为”属性”,attribute翻译为”特性”。每一个HTML标签(tag)都对应一个DOM接口HTMLXxxElement,比如Span标签对应的是HTMLSpanElement。这些标签的DOM接口都继承自HTMLElement接口,而HTML转载 2014-09-09 15:27:07 · 5136 阅读 · 0 评论 -
点击按钮复制链接到我的粘贴板【兼容所有浏览器】
首先看下个人的笔记:点击我兼容所有浏览器的JQuery zClip插件实现复制到剪贴板功能加载JQuery库和zclip插件script type="text/javascript" src="js/jquery-1.8.1.min.js">script> script src="js/jquery.zclip.min原创 2014-09-25 17:01:59 · 26968 阅读 · 2 评论 -
HTML5 Canvas知识点学习笔记
canvas ① 主要作用:绘制矢量图② 矢量图图形(路径)-(ILL) 位图图像(像素点)- PS中图像都是位图③ Canvas 能够制作动画,但是不是为了制作动画而生的也能够制作游戏。主要为了绘图而生。④ 能够设置宽高 推荐样式写在style;Canvas 相当于是一个绘制图形的容器,并没有绘制功能,需要借助JS(脚本)实现绘制功能原创 2014-06-11 21:22:19 · 2646 阅读 · 0 评论 -
HTML5地理定位,百度地图API,知识点熟悉
判断浏览器的兼容问题:IE9+支持地理定位,FF Chrome新版支持地理定位 if (navigator.geolocation) { alert('支持地理定位'); } else { alert('不支持地理定位'); }获取自己位置经纬度 var x=d原创 2014-06-08 19:05:55 · 4214 阅读 · 0 评论 -
AJAX基础知识点学习
AJAX基础知识点学习(AJAX异步加载、JSON与XML辨析……)原创 2014-06-03 18:59:38 · 1899 阅读 · 0 评论 -
HTML5中x-webkit-speech语音输入功能
现在各大网站都在搜索框中加入了语音输入功能,不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在这里试试效果,点击话筒即可:实现起来也非常简单,为input添加名为 x-webkit-speech 的属性就行了。相关的属性设置:lang设置语言种类:onwebkitspeechchange语音输入事件,当发声语音改变转载 2014-06-01 16:08:05 · 9591 阅读 · 0 评论