jquery简单的大背景banner图片全屏切换
摘要:

这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟。个人网站上线不久,最近整理整理从前的一些小逼格的事
大背景全屏切换效果图:
阅读全文
posted @
2015-04-30 13:57
html5前端技术分享
阅读(844)
推荐(0) 编辑
css子元素的margin-top为何会影响父元素
摘要:

这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然是CSS2.1盒模型规范……虽然很别扭,非常别扭的规定。 问题如下图,两层Div结构,Outer Div属性为“margin:0 auto”,本该紧贴外框顶部的,如果没有Inner Div,或者没有Inner Div的“margin-top”属性,一切如预期。但是当Inner Div设置了“margin-top:10px”之后,它的父元素Outer Div也被撑出来一个本不该有的“margin-top:10px”效果。
阅读全文
posted @
2015-04-24 17:18
html5前端技术分享
阅读(3023)
推荐(0) 编辑
js里正则表达式详解
摘要:

正则表达式中的特殊字符
字符 含意
\ 做为转意,即通常在"\"后面的字符不按原来意义解释,如/b/匹配字符"b",当b前面加了反斜杆后/\b/,转意为匹配一个单词的边界。
-或-
对正则表达式功能字符的还原,如"*"匹配它前面元字符0次或多次,/a*/将匹配a,aa,aaa,加了"\"后,/a\*/将只匹配"a*"。
^ 匹配一个输入或一行的开头,/^a/匹配"an A",而不匹配"An a"
$ 匹配一个输入或一行的结尾,/a$/匹配"An a",而不匹配"an A"
* 匹配前面元字符0次或多次,/ba*/将匹配b,ba,baa,baaa
阅读全文
posted @
2015-04-24 14:27
html5前端技术分享
阅读(372)
推荐(0) 编辑
css改变谷歌浏览器的滚动条样式
摘要:

/*---滚动条默认显示样式--*/
::-webkit-scrollbar-thumb{
background-color:#018EE8;
height:50px;
outline-offset:-2px;
outline:2px solid #fff;
-webkit-border-radius:4px;
border: 2px solid #fff;
}
/*---鼠标点击滚动条显示样式--*/
::-webkit-scrollbar-thumb:hover{
background-color:#FB4446;
height:50px;
-webkit-border-radius:4px;
}
阅读全文
posted @
2015-04-24 09:59
html5前端技术分享
阅读(1075)
推荐(0) 编辑
javascript触摸事件touch使用
摘要:

Apple在iOS 2.0中引入了触摸事件API,Android正迎头赶上这一事实标准,缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。
在本文深入研究iOS和Android设备提供的触摸事件API,探索一下可以构建哪些类型的应用,给出一些最佳做法,并论及一些使得可触控应用(touch-enabled application)的开发变得更加容易的有用技术。
阅读全文
posted @
2015-04-24 09:47
html5前端技术分享
阅读(1452)
推荐(0) 编辑
js使用CSS将图片转换成黑白(灰色、置灰)
摘要:

可能早就知道,像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(
filter: gray;
),不过,当时,其他浏览器是无解的。
不过,时代发展,如今,CSS3的逐步推进,我们也开始看到“黑白效果”大规模应用于实际的可能。
阅读全文
posted @
2015-04-24 09:40
html5前端技术分享
阅读(15230)
推荐(0) 编辑
如何让 height:100%; 起作用
摘要:

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?
按常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height: 100px;,那它应该在页面的竖向空间里占满100px的高度。
阅读全文
posted @
2015-04-24 09:26
html5前端技术分享
阅读(2892)
推荐(1) 编辑
js完美解决IE6不支持position:fixed的bug
摘要:

通过设置html{overflow:hidden}和body{height:100%;overflow:auto}来实现ie6下position:fixed效果,但这种办法有个缺陷,那就是:这会使页面上原有的absolute、relation都变成fixed的效果,在这里我就不做demo了,如果有怀疑,可以自己去试验一下。
于是我找了下资料,
阅读全文
posted @
2015-04-23 14:19
html5前端技术分享
阅读(306)
推荐(0) 编辑
js获取iframe的parent对象
摘要:

使用谷歌浏览器调试代码时无意间发现了一个奇特的问题:从iframe页面调用父级页面的方法,window.parent.text(),出现
Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.,
这主要是没有获取iframe所在页面的parent的造成的
阅读全文
posted @
2015-04-23 10:32
html5前端技术分享
阅读(3166)
推荐(0) 编辑
html5 Canvas API
摘要:

1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好;其次,在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。
2.在网页上使用canvas元素时,它会创建一块矩形区域。默认情况下该矩形区域宽为300像素,高为150像素,但也可以自定义具体的大小或者设置canvas元素的其他特性。
阅读全文
posted @
2015-04-23 09:58
html5前端技术分享
阅读(630)
推荐(0) 编辑
html5 requestAnimationFrame制作动画:旋转风车
摘要:

在以往,我们在网页上制作动画效果的时候,如果是用javascript实现,一般都是通过定时器和间隔来实现的,出现HTML5之后,我们还可以用CSS3 的transitions和animations很方便的实现动画,这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题,然而随着用户体验的提高,我们制作的动画效果有了更高的要求,那么对于比较复杂的而且具有较高流畅性的动画效果,用以上的两种方法就有点捉襟见肘了。对于质量较高的动画效果的实现,我们又不想用falsh,那怎么办呢?
阅读全文
posted @
2015-04-22 17:31
html5前端技术分享
阅读(1162)
推荐(0) 编辑
js实现全屏
摘要:

1、window.open方式
第一种:
在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式。方法为:在网页的与之间加入以下代码:
如果全屏显示的不是本页,则只需要把document.location换为对应的网址即可,即如下代码:
阅读全文
posted @
2015-04-22 16:13
html5前端技术分享
阅读(8460)
推荐(0) 编辑
Chrome 控制台新玩法-console显示图片以及为文字加样式
摘要:

在正常模式下,一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读,
除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息,在控制台中出来的效果如下:
在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。
阅读全文
posted @
2015-04-22 10:25
html5前端技术分享
阅读(674)
推荐(0) 编辑
JS辨别浏览器系统IOS或安卓
摘要:

/*
* 智能机浏览器版本信息:
*
*/
(function($,window,document){
$.extend({
browser:{
versions: function() {
var u = navigator.userAgent, app = navigator.appVersion;
return {//移动终端浏览器版本信息
trident: u.indexOf('Trident') -1, //IE内核
presto: u.indexOf('Presto') -1, //opera内核
阅读全文
posted @
2015-04-21 17:44
html5前端技术分享
阅读(1361)
推荐(0) 编辑
css3 text-transform变形动画
摘要:

版本:CSS1 兼容性:IE4+ NS4+ 继承性:有
语法:
text-transform : none | capitalize| uppercase| lowercase
参数:
none : 无转换发生
capitalize : 将每个单词的第一个首字母转换成大写,其余无转换发生
阅读全文
posted @
2015-04-21 14:28
html5前端技术分享
阅读(496)
推荐(0) 编辑
移动开发Html 5前端性能优化指南
摘要:

PC优化手段在Mobile侧同样适用
在Mobile侧我们提出三秒种渲染完成首屏指标
基于第二点,首屏加载3秒完成或使用Loading
基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
阅读全文
posted @
2015-04-20 10:36
html5前端技术分享
阅读(350)
推荐(0) 编辑
JS解析XML文件和XML字符串
摘要:

第一个参数是包含文档所使用的命名空间URI的字符串;
* 第二个参数是包含文档根元素名称的字符串;
* 第三个参数是要创建的文档类型(也称为doctype)
阅读全文
posted @
2015-04-17 16:10
html5前端技术分享
阅读(2214)
推荐(0) 编辑
canvas-js贝塞尔曲线代码在线生成工具
摘要:

canvas贝塞尔曲代码在线生成工具,可以快速生成二次、三次贝塞尔曲线的源码生成器,方便经常使用到canvas画图的同学使用,可以直接预览效果随意画出自己想要的图像。
生成源码效果预览:
阅读全文
posted @
2015-04-17 14:55
html5前端技术分享
阅读(6303)
推荐(0) 编辑
JavaScript库开发者们的规则
摘要:

1. 保持无侵入性 我的HTML标记不想知道你的JavaScript代码。
2. 严禁修改和扩展Object.prototype! 这条很重要,因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块,不要搞乱它们。
3. 不要过分扩展 对JavaScript内建对象的扩展越少越好。别误解我的意思。JavaScript的原生对象中有用的方法是有点少,有时不得不添加一两个自己的方法。但是,对于富有创造力的(库)程序员来说,添加这“一两个”方法是不够的。然而,请停下来!添加需要的就好。你对JavaScript内建对象的扩展越少,你的代码与其它框架产生的冲突的概率就越少。
阅读全文
posted @
2015-04-16 15:58
html5前端技术分享
阅读(239)
推荐(0) 编辑
如何提高手机APP的用户体验?
摘要:

随着移动互联网如日中天,如火如荼的时候,手机APP开发日益高涨了起来,关于手机APP的用户体验,也是一个老话长谈的话题。从事这行业也很久了,以下是我个人在工作中的一些关于APP的用户体验总结。
阅读全文
posted @
2015-04-16 14:47
html5前端技术分享
阅读(417)
推荐(0) 编辑
html清除浮动的6种方法
摘要:

使用display:inline-block会出现的情况:
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行被解析了
4.不设置的时候宽度由内容撑开
5.在IE6,7下步支持块标签
阅读全文
posted @
2015-04-16 09:31
html5前端技术分享
阅读(971)
推荐(1) 编辑
JS内存泄露常见原因
摘要:

分享的笔记本-a前端
1.闭包上下文绑定后没有释放;2.观察者模式在添加通知后,没有及时清理掉;
3.定时器的处理函数没有及时释放,没有调用clearInterval方法;
阅读全文
posted @
2015-04-15 14:21
html5前端技术分享
阅读(693)
推荐(0) 编辑
web前端开发规范文档
摘要:

符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度。
阅读全文
posted @
2015-04-15 14:15
html5前端技术分享
阅读(1085)
推荐(3) 编辑
jQuery无缝循环开源多元素动画轮播jquery.slides插件
摘要:

一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型
阅读全文
posted @
2015-04-14 10:31
html5前端技术分享
阅读(416)
推荐(0) 编辑
9种CSS3炫酷图片展开预览展示动画特效
摘要:

这是一组共9款CSS3炫酷图片预览展示动画特效插件。css的新特性可以让我们制作出各种炫酷的动画效果。该图片预览展示动画特效就是一个很好的例子,该效果开始时图片堆叠在一起,当鼠标滑过图片时,图片会以9种不同的方式展开,有扇形、平面展开等等非常酷的效果。
阅读全文
posted @
2015-04-14 09:19
html5前端技术分享
阅读(11200)
推荐(0) 编辑
纯css3 transforms 3D文字翻开翻转3D开放式效果
摘要:

在本教程中,将基于CSS3创建的一个实现一个有趣的3D开放式效果。教程的目的是展示我们如何能带来一些生活上使用CSS3 。
阅读全文
posted @
2015-04-10 09:47
html5前端技术分享
阅读(634)
推荐(0) 编辑
html5+css3第一屏滚屏动画效果
摘要:

html5+css3第一屏滚屏动画效果,适合手机端
阅读全文
posted @
2015-04-09 14:33
html5前端技术分享
阅读(1976)
推荐(0) 编辑
js上传图片及预览功能
摘要:

参考了网上一些人代码写了一个上传图片及时预览的功能,用到的朋友可以进来看看
阅读全文
posted @
2015-04-09 11:01
html5前端技术分享
阅读(757)
推荐(0) 编辑
photoSlider-原生js移动开发轮播图、相册滑动插件
摘要:

javascript移动端相册轮播图手指滑动插件,支持自定义轮播图滑动属性
阅读全文
posted @
2015-04-09 10:36
html5前端技术分享
阅读(726)
推荐(0) 编辑
提高HTML5 Canvas性能的技巧
摘要:

使用缓存技术实现预绘制,减少重复绘制Canvs内容
很多时候我们在Canvas上绘制与更新,总是会保留一些不变的内容,对于这些内容
应该预先绘制缓存,而不是每次刷新。
阅读全文
posted @
2015-04-08 09:19
html5前端技术分享
阅读(623)
推荐(0) 编辑
移动开发Html 5前端性能优化指南
摘要:

PC优化手段在Mobile侧同样适用
在Mobile侧我们提出三秒种渲染完成首屏指标
基于第二点,首屏加载3秒完成或使用Loading
基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB
Mobile侧因手机配置原因,除加载外渲染速度也是优化重点
阅读全文
posted @
2015-04-07 11:34
html5前端技术分享
阅读(461)
推荐(1) 编辑
纯JS画点、画线、画圆的方法
摘要:

以下画点,画线,画圆的方法,都不是用HTML5的canvas,而是用的纯js
用到了一些数学的三角函数方法
阅读全文
posted @
2015-04-03 15:32
html5前端技术分享
阅读(9311)
推荐(0) 编辑
移动开发webapp开发常用meta设置手机浏览器全屏模式
摘要:

1、WebApp全屏模式:2、隐藏状态栏/设置状态栏颜色:3、safri 添加到主屏界面的显示标题:4、忽略自动识别数字为电话号码:5、忽略自动识别邮箱账号:6、常用浏览器全屏设置:
阅读全文
posted @
2015-04-02 16:18
html5前端技术分享
阅读(3232)
推荐(1) 编辑
前端开发中的一些用户体验细节
摘要:

本文主要谈一谈在实践中,面对一个产品,或者是一个具体的功能点,也可能只是一个按钮,一次点击等等,以前端开发工程师的视角,如何关注用户体验,以及一些需要注意的细节问题,嗯,只说细节问题。
阅读全文
posted @
2015-04-02 14:02
html5前端技术分享
阅读(571)
推荐(1) 编辑