SVG Sprite技术介绍
发表于
svg
分类，标签:
18
09月
2015
0
未来必热：SVGSprite技术介绍by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4264一、Sprite技术这里所说的Sprite技术，没错，类似于CSS中的Sprite技术。图标图形整合在一起，实际呈现的时候准确显示特定图标。另，本文图片甚多，爪机党继续浏览需慎重。二、SVGSprite与symbol元素目前，SVGSprite最佳实践是使用symbol元素。symbol元素是什么呢？单纯翻译的话，是“符号”的意思。然，这个释义并不符合这里的场景。不知大家有没有用过Flash，symbol实际上就类似于Flash中的“影片剪辑”、或者“元件”。因此，我个人觉得，symbol应该解释为“元件”最为恰当！那，symbol和SV...
CSSOM视图模式(CSSOM View Module)相关整理
发表于
css3
分类，标签:
18
09月
2015
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=1907就在8月份，也就是上次gf大姨妈来的时候，W3C出炉了CSSOM视图模块(CSSObjectModelView)草案。CSSOM视图模块(CSSOMViewModule)定义了一些API，Web开发人员使用这些API可以进行检查，也可以以编程方式更改文档及其内容的视觉属性，包括布局框定位、视区宽度和元素滚动。以下就是一些API属性的相关内容，包括兼容性，使用，测试等。一、Window视图属性这些属性可以hold住整个浏览器窗体大小。微软则将这些API称为“Screenview接口”。包括：innerWidth 属性和 innerHeight...
html5中的svg包含的文本text上下左右居中的方法
发表于
svg
分类，标签:
15
09月
2015
水平居中：text-anchor 垂直居中：dominant-baseline: middlehttp://lea.verou.me/2013/03/easily-center-text-vertically-with-svg/ UsagecontextCategoriesPresentationattributeValuestart|middle|end| inheritAnimatableYesNormativedocumentSVG1.1(2ndEdition)<?xml version="1.0"?><svg width="120" height="120" viewBox="0&...
svg animation动画
发表于
svg
分类，标签:
08
09月
2015
超级强大的SVGSMILanimation动画详解本文花费精力惊人，具有先驱前瞻性，转载规则以及申明见文末，当心予以追究。本文地址：http://www.zhangxinxu.com/wordpress/?p=4333//zxx:本文的SVG在有缓存时候是无动画效果，此时您可以试着【右键-新标签页打开图片】。一、SVGSMILanimation概览1.SMIL是什么？SMIL不是指「水蜜梨」，而是SynchronizedMultimediaIntegrationLanguage（同步多媒体集成语言）的首字母缩写简称，是有标准的。本文所要介绍的SVG动画就是基于这种语言。SMIL允许你做下面这些事情：动画元素的数值属性（X,Y,…）动画属性变换（平移或旋转）动画颜色属性沿着运动路径运动注意到“沿着运动路径运动”这一条没？前面的三条CSS3都是可以有所担当的，最后这一条，...
js打开新窗口代码
发表于
JS
分类，标签:
07
09月
2015
<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
分类，标签:
01
09月
2015
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
分类，标签:
31
08月
2015
注：本文出自腾讯AlloyTeam的元彦，文章也可以在github上浏览。请尊重版权，转载请注明来源，多谢～～高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点：流量、功耗与流畅度。在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。JS动画是通过JS动态改写样式实现动画能力的一种方案，在PC端兼容低端浏览器中不失为一种推荐方案。而在移动端，我们选择性能更优浏览器原生实现方案：CSS3动画。然而，CSS3动画在移动多终端设备场景下，相比PC会面对更多的性能问题，主要体现在动画的卡顿与闪烁。目前对提升移动端CSS3动画体验的主要方法有几点：尽可能多的利用硬件能力，如使用3D...
模块的写法
发表于
Require
分类，标签:
24
08月
2015
随着网站逐渐变成"互联网应用程序"，嵌入网页的Javascript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Java...