随笔档案「2015年4月」 - html5前端技术分享

摘要：

这个是我初毕业刚进公司那会帮同事（同时也是同学）写的一个PC端的全屏图片切换效果，对于刚毕业的我来说写出来那会的喜悦之情是无法言表的，那时的我还是什么不懂的小白白，俗称菜鸟。个人网站上线不久，最近整理整理从前的一些小逼格的事大背景全屏切换效果图：阅读全文

posted @ 2015-04-30 13:57 html5前端技术分享阅读(887) 评论(0) 推荐(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前端技术分享阅读(3064) 评论(2) 推荐(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前端技术分享阅读(408) 评论(0) 推荐(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前端技术分享阅读(1089) 评论(0) 推荐(0)

javascript触摸事件touch使用

摘要：

Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。在本文深入研究iOS和Android设备提供的触摸事件API，探索一下可以构建哪些类型的应用，给出一些最佳做法，并论及一些使得可触控应用（touch-enabled application）的开发变得更加容易的有用技术。阅读全文

posted @ 2015-04-24 09:47 html5前端技术分享阅读(1495) 评论(0) 推荐(0)

js使用CSS将图片转换成黑白(灰色、置灰)

摘要：

可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的( filter: gray; )，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。阅读全文

posted @ 2015-04-24 09:40 html5前端技术分享阅读(15307) 评论(0) 推荐(0)

如何让 height:100%; 起作用

摘要：

当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。阅读全文

posted @ 2015-04-24 09:26 html5前端技术分享阅读(2919) 评论(0) 推荐(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前端技术分享阅读(321) 评论(0) 推荐(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前端技术分享阅读(3189) 评论(0) 推荐(0)

html5 Canvas API

摘要：

1.HTML Canvas API有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图API的基础上实现Canvas API相对来说比较简单。 2.在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，但也可以自定义具体的大小或者设置canvas元素的其他特性。阅读全文

posted @ 2015-04-23 09:58 html5前端技术分享阅读(668) 评论(0) 推荐(0)

html5 requestAnimationFrame制作动画：旋转风车

摘要：

在以往，我们在网页上制作动画效果的时候，如果是用javascript实现，一般都是通过定时器和间隔来实现的，出现HTML5之后，我们还可以用CSS3 的transitions和animations很方便的实现动画，这些技术手段在对于简单的或者对流畅性要求不高的动画不会有什么问题，然而随着用户体验的提高，我们制作的动画效果有了更高的要求，那么对于比较复杂的而且具有较高流畅性的动画效果，用以上的两种方法就有点捉襟见肘了。对于质量较高的动画效果的实现，我们又不想用falsh，那怎么办呢？阅读全文

posted @ 2015-04-22 17:31 html5前端技术分享阅读(1201) 评论(0) 推荐(0)

js实现全屏

摘要：

1、window.open方式第一种：在已经打开的一个普通网页上，点击“全屏显示”，然后进入该网页对应的全屏模式。方法为：在网页的与之间加入以下代码：如果全屏显示的不是本页，则只需要把document.location换为对应的网址即可，即如下代码：阅读全文

posted @ 2015-04-22 16:13 html5前端技术分享阅读(8525) 评论(0) 推荐(0)

Chrome 控制台新玩法-console显示图片以及为文字加样式

摘要：

在正常模式下，一般只能向console 控制台输出简单的文字信息。但为了把信息输出得更优雅更便于阅读，除了cosole.log()方法外还可以调用 cosole.warn() 来输出警告信息，在控制台中出来的效果如下：在输出信息前面会有一个带感叹号的黄色三角警告符号。似乎比一般的console信息要友好得多了。阅读全文

posted @ 2015-04-22 10:25 html5前端技术分享阅读(690) 评论(0) 推荐(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前端技术分享阅读(1377) 评论(0) 推荐(0)

css3 text-transform变形动画

摘要：

版本：CSS1　兼容性：IE4+ NS4+　继承性：有语法： text-transform : none | capitalize| uppercase| lowercase 参数： none : 　无转换发生 capitalize : 　将每个单词的第一个首字母转换成大写，其余无转换发生阅读全文

posted @ 2015-04-21 14:28 html5前端技术分享阅读(516) 评论(0) 推荐(0)

移动开发Html 5前端性能优化指南

摘要：

PC优化手段在Mobile侧同样适用在Mobile侧我们提出三秒种渲染完成首屏指标基于第二点，首屏加载3秒完成或使用Loading 基于联通3G网络平均338KB/s(2.71Mb/s），所以首屏资源不应超过1014KB Mobile侧因手机配置原因，除加载外渲染速度也是优化重点阅读全文

posted @ 2015-04-20 10:36 html5前端技术分享阅读(371) 评论(0) 推荐(0)

JS解析XML文件和XML字符串

摘要：

第一个参数是包含文档所使用的命名空间URI的字符串； * 第二个参数是包含文档根元素名称的字符串； * 第三个参数是要创建的文档类型（也称为doctype）阅读全文

posted @ 2015-04-17 16:10 html5前端技术分享阅读(2238) 评论(0) 推荐(0)

canvas-js贝塞尔曲线代码在线生成工具

摘要：

canvas贝塞尔曲代码在线生成工具,可以快速生成二次、三次贝塞尔曲线的源码生成器，方便经常使用到canvas画图的同学使用，可以直接预览效果随意画出自己想要的图像。生成源码效果预览：阅读全文

posted @ 2015-04-17 14:55 html5前端技术分享阅读(6622) 评论(0) 推荐(0)

photoSlider-原生js移动开发轮播图、相册滑动插件

摘要：

使用方法：分别引用css文件和js文件如：阅读全文

posted @ 2015-04-17 10:14 html5前端技术分享阅读(943) 评论(0) 推荐(0)

JavaScript库开发者们的规则

摘要：

1. 保持无侵入性我的HTML标记不想知道你的JavaScript代码。 2. 严禁修改和扩展Object.prototype! 这条很重要，因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块，不要搞乱它们。 3. 不要过分扩展对JavaScript内建对象的扩展越少越好。别误解我的意思。JavaScript的原生对象中有用的方法是有点少，有时不得不添加一两个自己的方法。但是，对于富有创造力的（库）程序员来说，添加这“一两个”方法是不够的。然而，请停下来！添加需要的就好。你对JavaScript内建对象的扩展越少，你的代码与其它框架产生的冲突的概率就越少。阅读全文

posted @ 2015-04-16 15:58 html5前端技术分享阅读(253) 评论(0) 推荐(0)

如何提高手机APP的用户体验？

摘要：