svg animation动画

发表于 svg 分类,标签:
超级强大的SVGSMILanimation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究。本文地址:http://www.zhangxinxu.com/wordpress/?p=4333//zxx:本文的SVG在有缓存时候是无动画效果,此时您可以试着【右键-新标签页打开图片】。一、SVGSMILanimation概览1.SMIL是什么?SMIL不是指「水蜜梨」,而是SynchronizedMultimediaIntegrationLanguage(同步多媒体集成语言)的首字母缩写简称,是有标准的。本文所要介绍的SVG动画就是基于这种语言。SMIL允许你做下面这些事情:动画元素的数值属性(X,Y,…)动画属性变换(平移或旋转)动画颜色属性沿着运动路径运动注意到“沿着运动路径运动”这一条没?前面的三条CSS3都是可以有所担当的,最后这一条,...

js打开新窗口代码

发表于 JS 分类,标签:
<ahref="javascript:void(0);" class="fd_btn">打开百度</a><scripttype="text/javascript">functionopenNewWin(url){window.open(url,'newwindow','height=1000,width=600,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');}window.onload=function(){document.getElementsByClassName("fd_btn"...

浏览器怪癖模式

发表于 html5 分类,标签:
http://www.oschina.net/translate/doctype ...

炫酷网站收集,

发表于 html5 分类,标签:
http://www.html5tricks.com/demo/html5-cool-fire-effect/index.html   //canvas 火http://easyrocketstudio.com/    http://www.fandango.com/canvas/theory   // 炫酷网站2http://new-year.pernod-ricard.com/  // 照片墙http://www.html5tricks.com/demo/html5-canvas-particle-effect/index.html  // 离子http://www.html5tric...

高性能 CSS3 动画

发表于 css3 分类,标签:
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览。请尊重版权,转载请注明来源,多谢~~高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点:流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额外关注对用户基站网络流量使用的情况,设备耗电量的情况。关于流畅度,主要体现在前端动画中,在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端,我们选择性能更优浏览器原生实现方案:CSS3动画。然而,CSS3动画在移动多终端设备场景下,相比PC会面对更多的性能问题,主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点:尽可能多的利用硬件能力,如使用3D...

模块的写法

发表于 Require 分类,标签:
随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑。Javascript模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块"(module)了。(正在制定中的ECMAScript标准第六版,将正式支持"类"和"模块",但还需要很长时间才能投入实用。)Javascript社区做了很多努力,在现有的运行环境中,实现"模块"的效果。本文总结了当前"Java...

require.js的用法

发表于 Require 分类,标签:
这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战。我采用的是一个非常流行的库require.js。一、为什么要用require.js?最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了。后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载。下面的网页代码,相信很多人都见过。  <scriptsrc="1.js"></script>  <scriptsrc="2.js"></script>  <scriptsrc="3.js"></script>  <scriptsrc="4.js"></script>  <...

使用SVG中的Symbol元素制作Icon

发表于 svg 分类,标签:
原文出处:腾讯ISUX   欢迎分享原创到伯乐头条前言随着大屏幕分辨率的普及以及各种移动设备层出不穷的移动互联网时代的到来,我们在网站设计时更应该关心内容在各种设备上的阅读性和显示效果。我们都希望能在任何时间,任何设备上都能清楚的,高效的传递信息给用户。而随着各种高清视网膜屏幕的出现,现在web设计也需要考虑各种高清屏幕的显示效果,同样前端在代码实现的时候也需要根据屏幕的不同来输出不同分辨率的图片。为了使我们的网页能够适配视网膜屏幕上的高分辨率,在前端开发中一般需要准备两套不同尺寸的图片来应对,一套在普通屏幕上显示;一套在高清屏幕上显示。为了解决屏幕分辨率对图标影响的问题,字体图标即iconfont顺势而生。字体图标是一种全新的设计方式。更重要的是相比图片而言,使用字体来制作图标可以不受于屏幕分辨率的影响,这对于现在各种分辨率屏幕的移动互联...

AMD:浏览器中的模块规范

发表于 JS 分类,标签:
AMD规范就是其中比较著名一个,全称是AsynchronousModuleDefinition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。从它被requireJS,NodeJs,Dojo,JQuery使用也可以看出它具有很大的价值,没错,JQuery近期也采用了AMD规范。在这篇文章中,我们就将介绍AMD的性质,用法,优势以及应用场景。从AMD中我们也能学习到如何在更高层面去设计自己的前端应用。AMD:浏览器中的模块规范前面提到,为实现与Node.js相同方式的模块写法,大牛们做了很多努力。 但浏览器环境不同于服务器端,它的模块有一个HTTP请求过程(而Node.js的模块文件就在本地),这个请求过程多数使用scripttag,script默认的异步性导致很难实现与Node.js一模一样的模块...

RequireJS 2.0 正式发布

发表于 Require 分类,标签:
就在前天晚上RequireJS发布了一个大版本,直接从version1.0.8升级到了2.0。随后的几小时JamesBurke又迅速的将版本调整为2.0.1,当然其配套的打包压缩工具r.js也同时升级到了2.0.1。此次变化较大,代码也进行了重构,层次更清晰可读。功能上主要变化如下: 1,延迟模块的执行。这是一个很大变化,以前模块加载后factory立马执行。性能上肯定有一些损耗。2.0修改实现,再没人诟病AMD的模块是立即执行的。现在也可以等到require的时候才执行。 2,config增加了shim,map,module,enforceDefine。shim参数解决了使用非AMD方式定义的模块(如jQuery插件)及其载入顺序。使用shim参数来取代1.0版本的order插件。其实在1.0版本中就曾经有人开发过use和wrap插件来解决此类问题。考虑到很多开发者...