HTMl5
文章平均质量分 63
一喵呜
这个作者很懒,什么都没留下…
展开
-
SASS用法指南
学过CSS的人都知道,它不是一种编程语言。你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,CSS是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。很自然地,有人就开始为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专转载 2014-09-03 12:05:27 · 882 阅读 · 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 · 2309 阅读 · 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 · 1445 阅读 · 0 评论 -
SVG画圆形进度条
HTML5自由者 SVG画圆形进度条 #svgForStroke { position: absolute; top: 0; left: 0; width: 200px; height: 200px; stroke-d原创 2015-06-21 17:54:31 · 6936 阅读 · 0 评论 -
判断一个类名或者元素是否存在的思路
if ($('.ybvideo ul').length > 0){ // code...}原创 2015-06-20 17:46:18 · 1500 阅读 · 0 评论 -
移动端开发心得(2015.3.1更新)
移动端开发心得原创 2015-02-27 01:50:55 · 4605 阅读 · 2 评论 -
利用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 · 4292 阅读 · 0 评论 -
CSS3多行显示省略号...
不用js也能控制第让他控制第几行省略:text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;原创 2015-06-20 17:42:52 · 6770 阅读 · 2 评论 -
戴尔一屏一屏 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 评论 -
input只能输入文本框
原创 2015-06-20 17:58:12 · 818 阅读 · 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 评论 -
点击按钮复制链接到我的粘贴板【兼容所有浏览器】
首先看下个人的笔记:点击我兼容所有浏览器的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 · 26981 阅读 · 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 · 11229 阅读 · 0 评论 -
使用debug.js调试手机网页
创作背景手机网页兼容性与ie相比,有过之无不及,调试的时候,我们会使用console.log,但是手机上看不到打印出来的信息。所以只好各种alert,但alert总显得不那么优雅。初学js的时候就alert,现在还在各种alert。而且alert后还要点击确定,如果循环alert,那就悲剧了,一直点确定吧,可能手机还因此搞死机了。那么有没有一种显得更加优雅的方式去输出调试信原创 2015-06-20 18:17:08 · 3702 阅读 · 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 评论 -
移动端手机横屏提示
【项目地址】: http://dwz.cn/RYgq7【手机二维码】:【效果】:【代码】 为了更好的体验,请使用竖屏浏览 /* 样式放在结尾,防止 base64 图片造成拥塞 */ @keyframes rotation { 10% { transform: rotate(90deg)原创 2015-06-21 17:40:42 · 7599 阅读 · 1 评论 -
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原创 2015-06-20 17:51:12 · 16876 阅读 · 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 评论 -
元素水平垂直居中【弹性布局 || 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 · 2105 阅读 · 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 · 2751 阅读 · 0 评论 -
使用Fiddler对手机应用进行抓包测试
手机应用的抓包测试相对于PC上要麻烦一些。以下内容来自公司QA的指导,感谢~需要的软件:抓包工具FiddlerWIFI共享工具:猎豹免费WIFI (使用360WIFI等均可,只要保证在同一局域网下就都可以,连接同一个路由器也可以)现在开始真实的抓包:1、启动Fiddler,打开菜单栏中的 Tools > Fiddler Options2、打开Fiddler Opti原创 2015-08-10 17:03:52 · 3728 阅读 · 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的画布:Paths
HTML5的画布路径是一系列的点与点之间的绘图指令。例如,一系列的点用线在它们之间,或者与它们之间的电弧。路径用来绘制多种类型的形状(线,圆,多边形等)的HTML5画布上的,所以要理解这个核心概念是很重要的。开始和关闭路径路径开始和结束时使用的2D上下文函数调用beginPath()和closePath() ,就像这样:var canvas = document.getEle原创 2015-08-06 14:58:17 · 1358 阅读 · 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 · 5605 阅读 · 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 · 10805 阅读 · 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 评论 -
纯CSS3实现滑动开关效果
实现效果如下:HTML结构代码: CSS代码:/*表单开关样式*/.ui-switch { position: absolute; font-size: .16rem; right:0.07rem; top: 50%;原创 2015-08-17 11:56:21 · 10575 阅读 · 4 评论 -
HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理
又很久没有更新博客了,在这段时间里发生的事还蛮多的,回想起来才发现时间过得好快啊。至于博客嘛,天天都会关注,一来想看看大家是否写了一些评论,二来想看看大神们(如lufy,浅墨,雾央,Himi等)有没有写新的文章。不过最近没有什么新“发明”,所以就没什么好写的了~Ok,进入正题。一,说在前面的话最近有的朋友说他们很喜欢原生的javascript的代码,不喜欢看用引擎封装后转载 2015-08-07 14:03:20 · 2079 阅读 · 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 · 1634 阅读 · 0 评论 -
Canvas——滑杆操控图片放大缩小
您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.getElementById("scale-range")原创 2015-08-24 15:08:30 · 5244 阅读 · 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 评论 -
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 · 669 阅读 · 0 评论 -
Grunt学习
http://www.cnblogs.com/yexiaochai/p/3603389.htmlGruntfile这个文件尤其关键,他一般干两件事情: ① 读取package信息 ② 插件加载、注册任务,运行任务(grunt对外的接口全部写在这里面) Gruntfile一般由四个部分组成 ① 包装函数 这个包装函数没什么东西,意思就是我们所有的代码必须放到这个函数里面 module.ex原创 2015-06-20 18:42:00 · 875 阅读 · 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 · 2567 阅读 · 0 评论 -
手机淘宝的flexible设计与实现
看到小黑的文章 关于webapp中的文字单位的一些捣腾 感觉很赞。尤其是,他提到了手机淘宝的meta,所以觉得要讲讲我们这方面的一些实践。手机淘宝从2014年中开始,全面推行flexible设计。什么叫flexible呢?其实flexible就是responsive的低端形态和基础。对我们来说,最直观的感受就是,在超宽屏幕上,网页显示不会两边留白。以前pc时代大家经常讲的流体布局,其实就是转载 2015-07-14 14:49:34 · 1976 阅读 · 0 评论 -
离屏Canvas——制作放大镜效果
您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var offCanvas = document.getElementById("offCanvas")原创 2015-08-24 14:57:57 · 5235 阅读 · 0 评论 -
离屏Canvas——制作水印图片
您的浏览器尚不支持canvas 您的浏览器尚不支持canvas var canvas = document.getElementById("canvas") var context = canvas.getContext("2d") var slider = document.ge原创 2015-08-24 15:01:05 · 3126 阅读 · 0 评论 -
啊哈:HTML5自由者博客搬家说明
原创 2015-09-09 17:32:57 · 1630 阅读 · 0 评论