轩枫阁

首页 / Web前端 / 授人以渔 (第14页)

“复制到剪切板”的多种浏览器兼容方案

前言

现在有很多地方需要复制,由于安全问题,浏览器的限制越来越严,实现方法也越来越有限window.clipboardData仅在IE上支持,Components.interfaces.nsIClipboard在FF上需要进行设置才能支持。

分析

现在网上比较流行的解决方案是利用flush作为桥梁,主要有:

1、Clipboard Copy,这个方法只支持flash 9,不支持flash 10。因为flash10中规定了只有在swf上进行了真实的操作(比如鼠标点击)才能访问剪切板,而上述方法只是使用了一个隐藏的swf文件,通过javascript操作flash的剪贴板,用户并没有对swf文件进行真实的操作,因此这个方法也就失效了。

2、Zero Clipboard,利用这个js库可以支持利用flash 10 实现复制到剪贴板。这个方法原理是在一个透明的flash(对用户来说是不可见的)上覆盖一个dom元素比如button或div,当点击这个dom时,实际点击的是flash,从而访问flash的剪贴板。 查看全文

2014/02 16  周日

基于canvas实现的旋转时间圆点

时间是指宏观一切具有不停止的持续性和不可逆性的物质状态的各种变化过程,其有共同性质的连续事件的度量衡的总称。时是客观存在,而间是人们的思想所划分的

前言

如何表示时间在走呢?如何实现时间可视化呢?就如轩枫阁的轮播图,用高级浏览器就可以看到图片右下角有个会动的圆点,当圆点旋转一周(9s),图片即切换,将时间生动的刻画出来。

实现原理

  • canvas绘制蓝色圆形
  • canvas绘制白色扇形
  • 白色扇形的度数随着时间变大

弧度制单位

rad 角度制单位:度 → 180度 = PI弧度 → 1度 = PI弧度/180度 → 1弧度= 180度/PI弧度

弧度 = 角度*PI/180

角度 = 弧度*180/PI 查看全文

2014/01 19  周日

jQuery插件写法总结以及面向对象方式写法总结

前言

最近在折腾jQuery插件,写成插件的目的就是为了实现功能与项目相分离,使得这个代码在下一个项目中能直接引用不出错。这使得我们在写插件的时候,就得考虑清楚,怎么写才能使得插件能够通用、灵活度高、可配置、兼容性好、易用性高、耦合度低等。

接下来就对以下几种写法进行分析,前两个是jQuery插件,后面2个是以对象的形式开发,都类似。而且写法也很多,我们要懂得这样写的利弊。另一篇基础文章:jQuery 插件写法

写法一

插件主体

查看全文

2014/01 11  周六

基于HTML5 Canvas实现的下雪动画

看到过许多的下雪动画,总感觉不够形象生动下面的这个下雪动画,是基于HTML5 Canvas实现的,理解起来也挺简单。

demo地址

先来一览是多生动的效果吧:http://www.xuanfengge.com/funny/html5/snowFall/

小tip:支持的浏览器有Chrome、IE9+、360极速

1

 需求点分析

  • 雪花形状:统一在canvas上绘制
  • 随机绘画出雪花形状:运用canvas的绘制圆形渐变
  • 雪花飘动画:利用requestAnimationFrame绘制动画帧
  • 雪花数量:控制在一定范围,如200片

查看全文

2014/01 11  周六

Web前端开发推荐阅读书籍、学习课程下载

前言

学校里没有前端的课程,那如何学习JavaScript,又如何使自己成为一个合格的前端工程师呢?

除了在项目中学习和跟着有经验的同事学习,读书也是必不可少的。书中有着相对完整的知识体系,每读一本好书都会带来一次全面的提高。

而如果深一脚浅一脚的学习,写出代码的质量会参差不齐。初学者的首要任务是成为靠谱的熟练开发者,能够稳定的输出有一定质量的代码。

前端技术发展速度特别快,总是涌现出很多新的东西,需要不断的学习。

本文将主要分享Web前端开发推荐书籍、学习课程资源。电子书籍:H5、CSS、JS、Node、HTTP、jQuery等经典推荐书籍。前端相关视频教程:JS、SEO、AJAX、jQuery、AngularJs、HTML5、ionic、PS等优质教程。

希望这些学习资源,能够让读者知识技术有进一步积累提升。

20151028更新

1. 极客学院系列视频

  • 知识体系图:Android开发、Cocos2d-x游戏开发、IOS开发、Swift语言、HTML5开发、Java语言、PHP语言、计算机二级、web前端开发、Python等
  • 实战路径图:Android路径图、IOS路径图、Cocos2d-x路径图、HTML5路径图等

2. angularjs+ionic视频教程

  • phonegap + Angularjs + ionic 移动app开发
  • ionic项目简介以及Angularjs 基础
  • 手机 app 开发的几种方式 ionic 学习思路
  • ionic css布局介绍
  • ionic ion-tap选项卡以及高级路由
  • ionic动态组件等

20150601更新

新增以下视频教程及资料:

  • 妙味2014远程课堂jQuery视频教程
  • Javascript视频教程大合集
  • 前端教程系列——html5,css3,web mobile
  • 前端教程系列——javascript
  • 前端相关视频教程 – 燕十八
  • JSP视频教程 – 韩顺平

20150510更新

新增:HTML5语言工程师-极客学院视频教程,目录为

  • HTML5基础
  • CSS3基础
  • JavaScript基础
  • HTML5新特性基础
  • 响应式布局
  • jQuery基础
  • jQuery UI基础
  • jQuery Mobile基础
  • CreateJS基础
  • TypeScript基础

20150208更新

  • Ajax视频教程-传智播客
  • SEO课程-李俊超
  • IT面试之2015届校招腾讯校招笔试面试大礼包
  • 传智播客PHP培训 站在java的高度讲解PHP
  • 传智播客PHP视频教程 李东超 LAMP经典入门
  • PHP程序员玩转算法公开课等系列视频教程

20150119更新

本次更新新增文档及视频:

  • Angular视频教程(英文版)
  • Git系列书籍

20141208更新

本次更新新增视频和文档:

  • Node系列书籍
  • PS教程:平面设计、AI、候老师系列
  • HTML+CSS教程-PHP兄弟连
  • JS视频教程-智能社
  • 产品经理系列
  • 前端参考手册系列
  • 微信公众平台开发

20140105更新

首批更新:

  • HTML5书籍
  • CSS书籍
  • jQuery书籍
  • web前端-FE书籍
  • JavaScript书籍
  • 名站文档
  • wordpress资料
  • 书籍源码

 

学习路线

大部分技术,熟读下列四类书籍,就是一个很好的学习提升

  • 入门,用浅显的语言和方式讲述正确的道理和方法
  • 全面,巨细无遗地探讨每个细节,遇到疑难问题时往往可以在这里得到理论解答
  • 实践,结合实际中经常遇到的情景环境,来描述如何设计和解决问题
  • 深入,讲解一些文化,思路,甚至于哲学上的东西,真正做到深入一种语言去编程,如unix编程艺术,程序员修炼之道等等

接下来介绍的这些书籍,没法说这是前端学习最优路线,但真看进去了获得一个IT民工从业资格是没啥问题的。 查看全文

2014/01 05  周日

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子