2014年01月4日 by 张 鑫旭 阅读 176929 次
“pointer-events:none提高页面滚动时候的绘制性能?”注意标题后面的问号。一般这种标题都说明作者要否定这个结论。我这里是否定呢还是坑定呢?不告诉你,你自己去寻找答案。
本文不单纯介绍技术,还探讨了关于“真理”的话题,若有兴趣,一起加入讨论吧。用真理来解决与研究技术问题。相信本文的内容不会让你失望的。
阅读全文…
标签: chrome, IE11, pointer-events, 性能, 渲染, 重绘, 重计算
发布在 CSS相关 | 21 条评论 »
2013年12月30日 by 张 鑫旭 阅读 255782 次, 今日 2 次
在页面上添加元素的位移动画,除了视觉效果(这是次要的),还有个作用就是视觉引导(重点)。举个大家可能见过的例子,选择商品的时候,我们希望商品飞到边缘或角落的购物车里,作用是:一来告知放在购物车里成功了,二来让用户知道购物车在哪里。
但是,直来直去的运动你用我也用,不出彩啊,于是,就有想法,我抛物线过去,会不会有别样的风采。
于是,……
阅读全文…
标签: 函数, 动画, 抛物线, 数学, 视觉引导
发布在 JS实例 | 51 条评论 »
2013年12月19日 by 张 鑫旭 阅读 66742 次, 今日 4 次
早在去年,也可能是去年的去年了,我已经开始在文章中不断使用具有自己特色的表情图。当时可能只是因为funny. 不过从大家的反馈来看,挺有意思,虽然没什么技术含量,但有特色。甚至有人提议可以弄一套表情包,我把这个建议一直放在了脑中。
于是在后来的日子里,偶尔就会因为文章需要补一两个表情。久而久之也有了一定的数量。
今年来到了新的团队,有很多非常出众的视觉设计师,她们绘制的表情,哇哦~~我怕是坐上火箭都追不上。但是,我在跟他们在群里聊七聊八时候,偶然冒出的几个鑫表情得到了他们的赞许,觉得挺有意思的。同事建议我可以搞了表情包,发给他们用用。甚至有同事说我这套表情一定会火的……
阅读全文…
标签: gif, 动画, 鑫表情
发布在 Design相关 | 25 条评论 »
2013年12月18日 by 张 鑫旭 阅读 242929 次, 今日 1 次
时代发展,事物变化。现代浏览器超过半壁江山,其API足以支持大规模的应用。如果就因为IE6-IE8这些浏览器的兼容性问题拖累,现代浏览器也要跟着加载其实可以不要的jQuery等框架,那现代浏览器发展的价值又在什么地方呢?于是自己整了个ieBetter.js
. 让IE6-IE8拥有IE9+, Chrome等浏览器特性,也就是是要规范的API,而现代浏览器几乎没有任何的变化,该如何使用还是如何使用。最大化现代浏览器的发展价值,同时兼容IE6-IE8。这种“趋同策略”对于中小项目,简单页面而言是最佳策略,至少我自己是这么认为的。
试一下,这是个另外不同的世界!
阅读全文…
标签: chrome, IE8, ie9, ieBetter.js, 兼容性, 浏览器
发布在 JS实例 | 78 条评论 »
2013年11月29日 by 张 鑫旭 阅读 149024 次, 今日 1 次
理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】
阅读全文…
标签: box-shadow, canvas, css3, font-face, getImageData, ie9, SVG, 伪元素, 图形生成, 盒阴影, 视网膜显示器
发布在 Canvas相关, CSS相关 | 37 条评论 »
2013年11月21日 by 张 鑫旭 阅读 317981 次, 今日 1 次
前段时间,iOS7不是瓜未熟就落地了嘛,然后捡瓜的人很多,然后国内外开始了各种探讨,从界面到动画,从兼容到实现等。其中,“毛玻璃”一次梆梆出世,一些爱折腾的弄潮人就可以琢磨怎么用CSS实现之,国内有之,国外也有之……
虽然本文标题也有“毛玻璃”二字,sorry,是“三字”。但是,并不是介绍如何实现毛玻璃效果的,而是介绍毛玻璃效果实现的基础——模糊。哈哈,恕我取巧,借用“毛玻璃”之词,沾沾喜气,散发芳气;蜂飞蝶舞,围观博主。
本文很单纯,就是图片模糊效果的实现。demo、源代码、截图、拓展以及御用模特应有尽有,希望本文的内容能够对您的学习有所帮助!
阅读全文…
标签: blur, canvas, filter, getImageData, SVG, 图片, 模糊, 滤镜, 高斯模糊
发布在 CSS相关, SVG相关 | 28 条评论 »
2013年11月19日 by 张 鑫旭 阅读 251781 次, 今日 2 次
如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了,或借助margin
负值,或借助CSS3 transform
的translate
属性;这里介绍另外一个方法,margin:auto
方法……
外甥点灯笼——照旧(舅),有demo有截图有源代码展示。希望本文的内容能够对您的学习有所帮助。
阅读全文…
标签: margin:auto, margin负值, translate, 垂直居中, 弹框, 绝对定位
发布在 CSS相关 | 56 条评论 »
2013年11月13日 by 张 鑫旭 阅读 72750 次
我记得有个版本的迅雷软件,会发现focus文本框时候,其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。
今天,偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果。其是JS实现的,我习惯性就想,可不可以CSS实现呢,一番折腾,发现,竟然……
阅读全文…
标签: css3, focus, outline, pointer-events, transition
发布在 CSS相关 | 18 条评论 »
2013年11月10日 by 张 鑫旭 阅读 216542 次, 今日 1 次
2013年下半年,鄙人的代码作品之一,名曰“jQuery万能切换插件”。顾名思意,使用了此插件,web页面上的各种切换效果你都可以轻松实现。兼容IE6+,API简洁、设计巧妙。性能优异,使用简单。可谓网页开发制作必备佳品啊!
阅读全文…
标签: jQuery, powerFloat, powerSwitch, 动态api, 匿名api, 图片切换效果, 手风琴效果, 插件, 跑马灯效果, 选项卡
发布在 jQuery相关 | 85 条评论 »
2013年11月5日 by 张 鑫旭 阅读 257545 次, 今日 2 次
目前从实用技术角度讲,文件上传的断点续传实现主要是借助客户端或Swf控件,也就是,这些带续传功能的上传都不是使用HTTP协议实现的,也就是不是传统的网页技术(HTML+CSS+JS)实现的。
然,times are changing, 事物发展,时代变化。以前的一些所谓的“不能”、“不可能”都将成为过去。
Ajax 2.0中最大的变化之一就是对二进制数据的支持,而且提供了一个可以直接处理二进制数据的方法——slice方法。
该方法为断点续传提供了有力的技术支持。
阅读全文…
标签: Ajax, Blob, File, HTTP协议, XMLHttpRequest, 上传, 文件上传, 断点续传
发布在 JS实例 | 63 条评论 »