2015年06月_一喵呜

原创 SVG画圆形进度条

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

2015-06-21 17:54:31 6936

原创移动端手机横屏提示

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

2015-06-21 17:40:42 7599 1

原创 Grunt学习

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

2015-06-20 18:42:00 874

转载 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

转载 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

原创元素水平垂直居中【弹性布局 || 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

原创 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

原创判断是否微信 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

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

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

2015-06-20 18:17:08 3701

转载 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

转载 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

原创 CSS3 Loading效果

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

2015-06-20 18:01:33 1085

原创 input只能输入文本框

2015-06-20 17:58:12 818

原创 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

原创图片生成database 64

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

2015-06-20 17:52:33 3686

原创 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 16874

原创戴尔一屏一屏 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

原创背景渐变兼容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

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

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

2015-06-20 17:46:18 1499

原创多行文本超出 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

原创 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 6769 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 4289

HTMl5自由者