- 轻松学习 JavaScript 11-29
- 程序猿必备的10款web前端开发插件五 11-29
- 前端实践:你要会用！ 11-29
- html5 canvas重点来了之简单的帧式动画 11-29
- Book思议，兄弟连高洛峰再撰HTML5系列丛书京东 11-29
- 自适应布局中table元素的自适应性 11-29
- html5 canvas进阶之canvas图像基础 11-29
- 分享8个难忘的HTML5炫酷动画 11-29
- 前端你不能不知的，滚动监听 11-29
- css3 实现省略号 3个点的动画 11-29
轻松学习 JavaScript
发布者: superzhang | 发布时间:2017-11-29轻松学习 JavaScript（1）：了解 let 语句
使用let语句，允许你在JavaScript中创建块范围局部变量。let语句是在JavaScript的ECMAScript 6标准中引入的。在你往下了解let语句之前，我建议你先查看基于Infragistics jQuery库的Ignite UI，它可以帮助你更快地编写和运行Web应用程序。你可以使用JavaScript库的Ignite UI来快速解决HTML5，jQuery，Angular，React或ASP.NET MVC中复杂的LOB需求。（你可以在这里下载Ignite UI的免费试用版。）
在ECMAScript 6之前，JavaScript有三种类型的范围：
全局范围
函数范围
词汇范围
为了详细探索let语句，请细想下面的代码段：
functionfoo(){
varx=9;
if(x>5){
varx=7;
console.log("Value of x in if statement = "+x);
}
console.log("Value of x outside if statement = "+x);
}
foo(
程序猿必备的10款web前端开发插件五
发布者: superzhang | 发布时间:2017-11-291.SVG实现的一组超华丽Loading加载动画
Loading动画我们已经分享过很多了，大部分都是基于纯CSS3的，或者有些也有jQuery协助完成。比如这个10组蓝色风格的纯CSS3 Loading动画图标就非常实用。今天我们要分享的是一组基于SVG的超华丽Loading加载动画，利用SVG的路径特性，动态绘制形状和状态，从而产生Loading加载的视觉效果，同样也非常实用，因为现在所有浏览器都支持SVG了。
2.超清新的3款纯CSS3自定义Checkbox开关
前两天我们刚分享过一款纯CSS3灯光开关动画 自定义checkbox样式，主要是利用CSS3样式渲染checkbox控件和label标签实现自定义开关样式。今天我们要分享的也是一款基于CSS3的自定义Checkbox开关，一共有3种漂亮的外观。
前端实践:你要会用！
发布者: superzhang | 发布时间:2017-11-29前端开发要的不是去蛮干，要学会有技巧的去运用知识，那么该怎么运用知识去提高你的开发效率呢？
类库和框架，你值得拥有：
、
首先，jquery一定是大部分web前端开发者不可或缺的工具。利用jquery不仅仅停留在只使用它的API和插件上，还可以会自己去写jquery插件，还可以去读jquery的源码、了解jquery的设计思路。如果你也能那样做，你会收获到意想不到的效果。
假设你现在遇到一个问题：怎么才能最透彻的去理解javascript的事件系统？最好的答案是之一就是读jquery关于事件处理部分的源码。一遍不会可以多读几遍。
bootstrap从github上的排名也能看出道道来。很多公司的UI设计师，都从bootstrap上截图作为素材。
fontAwesome是全世界最强大的图标系统。相比于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。
requirejs和seajs这种
html5 canvas重点来了之简单的帧式动画
发布者: superzhang | 发布时间:2017-11-29经过之前的基础铺垫，现在咱们可以很容易的写出令人胆怯的动画啦！！！
这一节会说到简单的帧式动画，在下一节中会说到高级帧式动画。咱们还是从简单的开始，以至于说到后面的时候，才不会出现看不懂的情况。
首先我还是利用了drawImage()函数以及4个拼板来制作一个动画。
1、我做的是花开花谢这个简单的动画，所以需要用到下面的一张图：
2、创建一个数字叠加，用于计算此时那一帧正显示在拼版上面。
3、创建一个计时循环，通过下面这种方式，drawScreen()函数每隔100s就会被调用一次。这种方式与使用serInterval()函数的效果相同，只是这种方式每次会清除自己，
Book思议，兄弟连高洛峰再撰HTML5系列丛书京东热卖中
发布者: superzhang | 发布时间:2017-11-29随着HTML5标准化逐渐成熟，以及互联网的飞速发展和移动端的应用不断创新，再加上微信公众号、小程序的应用飙升，原生APP向Web APP和混合APP的转变，用户对视觉效果和操作体验的要求越来越高，HTML5成为移动互联网的主要技术，也是目前的主流技术之一。
为了让前端技术初学者少走弯路，快速而轻松地学习HTML5和JavaScript编程，兄弟连利用多年的教学经验积累，再通过对企业实际应用的调研，编写了一整套HTML5系列图书，共5本，包括《细说网页制作》、《细说JavaScript语言》、《细说DOM编程》、《细说AJAX与jQuery》和《细说HTML5高级API》。
每一本
自适应布局中table元素的自适应性
发布者: superzhang | 发布时间:2017-11-29按HTML5的说法，table是一个不鼓励使用的HTML标记，但现实工作中，我们避免不了的偶尔会用到它。那么，怎样让一个传统的表格也表现出自适应性呢？
网上有很多种解决方案，最常见的是配合JavaScript。css-tricks里给出了一个用纯CSS实现的，但它需要将一些业务数据写在CSS里。而本文这将提到的一种方法也是用纯CSS实现表格的自适应布局，而且CSS只负责表现，不牵涉业务逻辑和数据。
例如：
借助伪元素和自定义属性
我们将借助伪元素 :before 和 :after 的力量。通常， 它们用显示图标类的内容，比如一个箭头，提示，或文字图案(icon)。它的另外一个神奇的功能是元素属性值显示到HTML内容里，content: attr(data-label)，放在before/after伪元素类里。沿着这个思路，我们就能够让table在PC端表现成网格效果，而在小屏的手机端表现成流式布局。
我们暂以600px为小屏幕大屏幕的分界点，下面的CS
html5 canvas进阶之canvas图像基础
发布者: superzhang | 发布时间:2017-11-291、首先还是使用之前讲过的Image()函数来预加载图像。
在调用图像之前，需创建一个事件监听器，为其保证图像已经正确的加载。
如下图：
监听图片已经正确加载
2、把图像显示在画布上面，这里将不再使用createPattern()，改而使用drawImage()函数来实现
提示：createPattern()用在图像填充，而drawImage()是直接加载图像。两者有明显的区别，不要混淆了哦！
drawImage()中包含9个参数，第一个参数：Image对象，也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。
具体用法如下：
2、HTML5/CSS3圆盘秒表动画 秒表可暂停计时
今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表
前端你不能不知的，滚动监听
发布者: superzhang | 发布时间:2017-11-29（点击右上角“+关注”【切图】头条号，有干货，有资讯，有态度！！）
文/作者：aming（dingxiangming82），专注web前端开发，关注用户体验，和提供高品质的psd转html5前端开发外包服务，web前端实战培训！
在我们上网的时候，经常能看到当我们滚动到某个区域的时候，对应的导航栏的菜单会自动选中，这样的效果看起来很神奇，（反正早些年，我是觉得很神奇），这个效果叫做滚动监听
网上有很多插件，但是如果你有了下面这段话，并且具备一定的jq基础的话，它在你将来项目实战中会发挥很大的作用，以下代码摘自切图网自主开发的slicy框架。
//滚动监听(对象,偏移,改变的样式,非活动时隐藏对象)$(function(){$(window).bind("scroll",function(){$('.sidebar').not('.nojs').find('li').not('.nojs').each(function(){var top=$(window).scrollTop();if($($(this).find('a').attr("href")).size() > 0){var thisOffsetTop =$($(this).find('a').attr("href")).offset().top;}if (thisOfcss3 实现省略号 3个点的动画
发布者: superzhang | 发布时间:2017-11-29（点击右上角“+关注”【切图】头条号，有干货，有资讯，有态度！！）
文/作者：aming（dingxiangming82），专注web前端开发，关注用户体验，和提供高品质的psd转html5前端开发外包服务，web前端实战培训！
在切图网（qietu.com）最近一次前端项目开发中，就有这么一个h5的（第一财经）的项目，需要做的非常精细，精细到什么程度？ 连省略号的3个小点也需要做动画效果 ，虽然很多波折，但是最终出来效果是ok的。
下面附3个点动画代码，拷贝直接可用，亲测过的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
.grebtn{
display: inline-block;
padding: 0.25em 1.25em;
border: 1px solid;
border-radius: 2px;
vertical-align: bottom;
font-weight:
