风雨后见彩虹

2015年10月3日

摘要：上篇文章写到了一个不错的jquery实现邮箱输入自动提示功能，发现还有一个不错的自动提示插件：先展示结果如图： html代码： css代码： jquery代码： /** * 邮箱自动提示插件 * @constructor EmailAutoComplete * @ options {object} 阅读全文

posted @ 2015-10-03 23:09 风雨后见彩虹阅读(947) 评论(0) 推荐(1) 编辑

jQuery 实现邮箱输入自动提示功能：（一）

摘要：记得去年做某个项目的时候，用到了邮箱输入自动提示功能，于是网上搜了一下，发现了这个写得不错，现在回想起来，转载一下，方便查阅。邮箱的广泛使用得益于它的免费，因此很多网站在注册的时候都会直接使用邮箱作为账号名为了提高用户的体验，很多网站都会实现邮箱输入的自动提示功能。实现效果如图所示：核心代码阅读全文

posted @ 2015-10-03 22:52 风雨后见彩虹阅读(1497) 评论(0) 推荐(1) 编辑

jQ效果：jQuery时间轴插件jQuery Timelinr

摘要：前言这是一款可用于展示历史和计划的时间轴插件，尤其比较适合一些网站展示发展历程、大事件等场景。该插件基于jQuery，可以滑动切换、水平和垂直滚动、支持键盘方向键。经过扩展后可以支持鼠标滚轮事件。 HTML 我们在body中建立一个div#timeline作为展示区，#dates为时间轴，示例中我阅读全文

posted @ 2015-10-03 22:29 风雨后见彩虹阅读(2034) 评论(0) 推荐(1) 编辑

2015年10月1日

『面试题』WEB前端面试2014阿里旺旺

摘要： NO1.下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用css3中的功能实现它们的布局。已知HTML结构是： <div class="box"> <div class="item">column 1</div> <div class= 阅读全文

posted @ 2015-10-01 22:47 风雨后见彩虹阅读(1087) 评论(0) 推荐(1) 编辑

CSS实现背景透明，文字不透明，兼容所有浏览器

摘要：如何实现背景透明，文字不透明，兼容所有浏览器？我们平时调整的不透明度如图所示：实现透明的css方法通常有以下3种方式，以下是不透明度都为80%的写法： css3的opacity:x，x 的取值从 0 到 1，如opacity: 0.8 css3的rgba(red, green, blue, al 阅读全文

posted @ 2015-10-01 21:30 风雨后见彩虹阅读(3830) 评论(0) 推荐(2) 编辑

常用中文字体 Unicode 编码

摘要：各大网站的字体选择网站字体腾讯 font: 12px "宋体","Arial Narrow",HELVETICA; 淘宝 font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif; 蘑菇街 font: 12px/1. 阅读全文

posted @ 2015-10-01 20:24 风雨后见彩虹阅读(1195) 评论(0) 推荐(0) 编辑

移动web页面使用的字体的思考

摘要：前言记得做PC端页面的时候，字体一般设置为微软雅黑，现在做起移动端页面来了，设计师们一般都还把字体设置为微软雅黑字体，但是做出来后，测试的时候发现页面中的字体不是微软雅黑，怎么办？后来了解到的手机系统 ios、android 等是不支持微软雅黑字体。为了满足产品的需要，保证视觉稿的还原度，手机端阅读全文

posted @ 2015-10-01 19:47 风雨后见彩虹阅读(779) 评论(0) 推荐(0) 编辑

小tips：JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)

摘要：在Firefox，chrome，opera，safari，ie9，ie8等高级浏览器直接可以用JSON对象的stringify()和parse()方法。 JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式；结果：string 结阅读全文

posted @ 2015-10-01 09:19 风雨后见彩虹阅读(1585) 评论(1) 推荐(0) 编辑

2015年9月30日

CSS之Medial Queries的另一用法：实现IE hack的方法

摘要：所谓Medial Queries就是媒体查询。随着Responsive设计的流行，Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择，让站点在不同的设备中实现不同的效果。众所周知，有些时候为了实现IE下的某些效果与现代浏览器一致，我们不得不使用一些阅读全文

posted @ 2015-09-30 21:55 风雨后见彩虹阅读(330) 评论(0) 推荐(0) 编辑

HTML5本地存储localStorage与sessionStorage详解

摘要：前言在最近的项目中用到了html5的本地存储，下面总结一下。 1、html5几种存储形式本地存储（localStorage && sessionStorage）离线缓存（application cache） indexedDB 和 webSQL 2、localStorage && sessio 阅读全文

posted @ 2015-09-30 09:04 风雨后见彩虹阅读(4678) 评论(1) 推荐(1) 编辑

2015年9月29日

HTML5 Geolocation获取地理位置信息

摘要： Html5中提供了地理位置信息的API，通过浏览器来获取用户当前位置。基于此特性可以开发基于位置的服务应用。在获取地理位置信息前，首先浏览器都会向用户询问是否愿意共享其位置信息，待用户同意后才能使用。 Html5获取地理位置信息是通过Geolocation API提供，使用其getCurrentPo 阅读全文

posted @ 2015-09-29 23:22 风雨后见彩虹阅读(2007) 评论(0) 推荐(0) 编辑

关于CSS中的字体尺寸设置 em rem等

摘要：常用单位在CSS中可以用很多不同的方式来设定字体的尺寸。一般来说，这些单位被分成两大类：绝对单位(absolute)和相对单位(relative)。绝对单位在大多数情况下是相对于某些实际量度而言的固定值，即是说它们一旦设定，就不会因为其他元素的字体尺寸变化而变化。相对单位没有一个固定的度量值，阅读全文

posted @ 2015-09-29 17:25 风雨后见彩虹阅读(3247) 评论(0) 推荐(1) 编辑

JS计算系统当前日期是星期几的几种方法

摘要：方法一：方法二：方法三：方法四：当然这四种方法的完美程度是一目了然的。阅读全文

posted @ 2015-09-29 08:45 风雨后见彩虹阅读(6365) 评论(0) 推荐(2) 编辑

2015年9月28日

jQuery之$.ajax()方法详解及实例

摘要： 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。 2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。3.timeout:要求为Number类型的参数阅读全文

posted @ 2015-09-28 22:17 风雨后见彩虹阅读(1829) 评论(0) 推荐(0) 编辑

pace.js – 加载进度条插件

摘要：这儿只是简单介绍一下这个插件pace.js. 在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和阅读全文

posted @ 2015-09-28 17:23 风雨后见彩虹阅读(4656) 评论(1) 推荐(0) 编辑

在线代码编辑、保存与运行网址推荐

摘要：最近开始讨厌写一个demo，写好之后要上传到服务器，传好之后还要找对地址，以后如果改版还需要下载代码，编辑代码，再上传。多么繁复的过程，我只是写个demo而已。于是，我开始寻找在线工具实现 1. CodePen CodePen只是一个web前端的运行场地，具备机动、训练和分享等多种功能。同时，Co 阅读全文

posted @ 2015-09-28 14:40 风雨后见彩虹阅读(1573) 评论(0) 推荐(0) 编辑

AngularJS 简介

摘要： AngularJS 是一个JavaScript 框架。它可通过注：建议把脚本放在元素的底部。这会提高网页加载速度，因为 HTML 加载不受制于脚本加载。AngularJS 扩展了 HTMLAngularJS 通过ng-directives扩展了 HTML。ng-app指令定义一个 Angula... 阅读全文

posted @ 2015-09-28 13:01 风雨后见彩虹阅读(517) 评论(0) 推荐(0) 编辑

CSS3 Filter详解（改变模糊度亮度透明度等方法）

摘要： CSS3 Filter（滤镜）属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效阅读全文

posted @ 2015-09-28 10:25 风雨后见彩虹阅读(57803) 评论(2) 推荐(10) 编辑

2015年9月26日

CSS之HTML meta viewport属性详解

摘要：什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的 Safari 浏览器最阅读全文

posted @ 2015-09-26 20:25 风雨后见彩虹阅读(3095) 评论(0) 推荐(0) 编辑

2015年9月25日

移动开发js库Zepto.js应用详解

摘要：从哪里下载 Zepto地址：http://zeptojs.com/中文版地址：http://www.css88.com/doc/zeptojs_api/这个问题看起来很蠢，从官网下载不就行了嘛！可是你有没有发现下载链接上面有行小字呢？在这个README里面你会惊奇地发现，Zepto 源码中有 14 ... 阅读全文

posted @ 2015-09-25 17:07 风雨后见彩虹阅读(1122) 评论(0) 推荐(0) 编辑

HTML5实现video标签的自定义播放进度条

摘要：现在随着html5的渐热，越来越多的web开发者都开始选择使用html5写出一些比较好的web应用。 html代码： js代码：阅读全文

posted @ 2015-09-25 10:11 风雨后见彩虹阅读(49007) 评论(0) 推荐(5) 编辑

2015年9月24日

jQ效果：jQuery和css自定义video播放控件

摘要：下面介绍一下通过jquery和css自定义video播放控件。 Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中有一个相同的Html5视频控件而不受阅读全文

posted @ 2015-09-24 22:48 风雨后见彩虹阅读(7979) 评论(0) 推荐(0) 编辑

HTML5 audio与video标签实现视频播放，音频播放

摘要：随着互联网的飞速发展以及HTML5的应用，越来越多的项目中用到video，audio当常用标签。 audio 标签属性当然audio元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：再如下面： video标签属性下面先介绍下video标阅读全文

posted @ 2015-09-24 10:44 风雨后见彩虹阅读(16255) 评论(0) 推荐(2) 编辑

2015年9月22日

CSS3 圆角（border-radius）详解

摘要：在做网页的时候，常常需要实现圆角，以前的做法就是切图，现在好了，有了css3的 border-radius 特性之后，实现边框圆角效果就非常简单了，而且其还有多个优点：一是减少网站维护工作量；二是提高了网站的性能，少了对图片的 HTTP 的请求，网页载入速度将变快；三是增加视觉美观性。 border 阅读全文

posted @ 2015-09-22 23:35 风雨后见彩虹阅读(4307) 评论(0) 推荐(0) 编辑

如何禁止 iPhone Safari video标签视频自动全屏？

摘要：最近做一个移动端微信页面项目，在微信页面中有视频播放，但是需要禁止IOS的自动全屏播放（前提必须使用video标签）。如： <video id="post" autoplay loop preload="auto"> <source src="foo.mp4" type="video/mp4"> < 阅读全文

posted @ 2015-09-22 20:45 风雨后见彩虹阅读(4938) 评论(0) 推荐(0) 编辑

2015年9月17日

HTML5的DeviceOrientation实现微信摇一摇功能

摘要：在HTML5中，DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间，通过改时间可以获取设备的运动状态、加速度等数据（另还有deviceOrientation事件提供了设备角度、朝向等信息）。而通过DeviceMotion对设备运动状态的判断，则可以帮阅读全文

posted @ 2015-09-17 18:47 风雨后见彩虹阅读(2632) 评论(0) 推荐(0) 编辑

CSS效果：CSS select样式优化含jquery代码

摘要： CSS 下拉选择菜单基本的CSS样式不怎么好看，通过一些简单的样式优化，可以得到如下图这样的： html结构如下： <div class="sel_wrap"> <label>请选择您所在的城市</label> <select class="select" name="" id="c_city"> 阅读全文

posted @ 2015-09-17 18:37 风雨后见彩虹阅读(1954) 评论(0) 推荐(0) 编辑

CSS3布局之多列布局columns详解

摘要： columns语法：columns：[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度其中：[ column-width ]：设置或检索对象每列的宽度；[ column-count ]：设置或检索对象的列数。 css代码： html代码：结果阅读全文

posted @ 2015-09-17 18:34 风雨后见彩虹阅读(9985) 评论(0) 推荐(0) 编辑

2015年9月16日

使用CSS如何解决inline-block元素的空白间距

摘要：早上在博客中有人提了这样一个问题：“li元素inline-block横向排列，出现了未知间隙”，我相信大家在写页面的时候都遇到过这样的情况吧。我一般遇到这情况都会把li浮动起来，这样就没有间隙。但是解决这个未知间隙，还是有很多办法的，在w3cplus上提供了好几种解决办法。在这总结一下。先看结构阅读全文

posted @ 2015-09-16 17:38 风雨后见彩虹阅读(1957) 评论(0) 推荐(1) 编辑

2015年9月14日

CSS3布局之box-flex的使用

摘要：语法：其中number取值：使用浮点数指定对象所分配其父元素剩余空间的比例。设置或检索伸缩盒对象的子元素如何分配其剩余空间。(伸缩盒最老版本) html代码： css代码：得到的结果如图所示: 注：其实上面的css代码中-ms-box-flex与box-flex可以省略，为什么这么说呢，IE6- 阅读全文

posted @ 2015-09-14 22:37 风雨后见彩虹阅读(1273) 评论(0) 推荐(0) 编辑

风雨后见彩虹

无论什么时候开始，重要的是不要停止

公告