js相关插件小应用以及css属性拓展

1.jquery.guide.js新版上线操作向导镂空提示jQuery插件

网站上线或者改版的时候，常常会做一个操作向导，告诉用户一些重要操作到了哪里，或者什么地方隐藏了什么好玩的东西，等等，虽然我都是直接关掉的，或者快速跳过，但是对有部分用户而言还是很有用的。

转载文章地址http://www.zhangxinxu.com/wordpress/2017/05/jquery-guide-js-plugin/

demo地址:http://www.zhangxinxu.com/studyjs/201705/jquery-plugin-new-hand-guide.html

2.使用canvas在前端实现图片水印合成

图片转为base64方法：

inputFile.addEventListener('change', function (event) {
    var reader = new FileReader();
    var file = event.target.files[0];
    reader.onload = function(e) {
      var base64 = e.target.result;
    };
    reader.readAsDataURL(file);
});

转载文章地址:http://www.zhangxinxu.com/wordpress/2017/05/canvas-picture-watermark-synthesis/

demo地址：http://www.zhangxinxu.com/study/201705/js-canvas-image-watermark-synthesis.html

3.accesskey属性与web自定义键盘快捷访问

<div accesskey="1">自定义快捷访问</div>

这里的属性值'1'对应的就是键盘上的数字1，如果是accesskey="a"则'a'对应的就是键盘上的字母a。

需要注意的是，虽然说accesskey属性值和键盘相对应，但并不是说直接按下这个键，就能快捷访问。浏览器是通过快捷键组合访问的形式进行页面元素的快速访问的。具体的组合方式参见下表（参考自MDN文档，有调整）：

	Windows	Linux	Mac
Firefox	Alt + Shift + key		Control + Alt + key
Internet Explorer	Alt + key	N/A
Google Chrome	Alt + key		Control + Alt + key
Safari	Alt + key	N/A	Control + Alt + key
Opera	同Google Chrome