JavaScript 动画类库 easyAnim

记得几年前刚接触jQuery的时候,就一直叹服于jQuery竟然能如此轻松的实现javascript的动画。前不久想研究下javascript的动画,当时就萌生了自己开发一个javascript动画类库的念头,于是就有了现在的easyAnim。

javascript动画的实现原理看起来很简单:连续改变元素的CSS属性,如:width, height, left, margin等,只要有一定的速度就可以达到动画效果,与动画片的制作原理类似。尽管如此,自己真正动手开发起来并不简单,也从中学到了不少东西。

easyAnim小巧、简洁、易用,API和jQuery的调用几乎一样,熟悉jQuery动画的人甚至不用去看API说明就能轻松使用,jQuery这么高的使用率与其简洁易用的API设计是分不开的。

如何使用easyAnim?

// 引入easyAnim(为了你的网页性能,强烈建议在底部引用)

比如要给元素box添加一个slideUp效果:

easyAnim( 'box' ).slideUp();

easyAnim()接收一个参数,该参数可以是元素的ID也可以是一个DOM对象,将元素实例化后就可以调用easyAnim的动画方法了。easyAnim支持联写,支持动画队列:

easyAnim( 'box' ).slideDown( 'slow' )
	.custom( { left : '500px' }, 600, 'linear' )
	.slideUp( 400, 'easeInStrong' function(){
		alert( 'I am is callback!' );
	});
阅读全文 »

获取元素的计算的样式

要想获取HTML元素的计算样式一直都存在很多的兼容问题,各浏览器都会存在一些差异,Firefox、webkit(Chrome,Safari)支持W3C标准的方法:getComputedStyle(),而IE6/7/8不支持标准的方法但是有私有的属性来实现:currentStyle,IE9和Opera两个都支持。有了这2个方法和属性基本上可以满足大多数要求了。

var getStyle = function( elem, type ){
	return 'getComputedStyle' in window ? getComputedStyle(elem, null)[type] : elem.currentStyle[type];
};
阅读全文 »

easyDialog 简单、实用的弹出层组件

easyDialog没有模板机制,只负责逻辑层的弹出效果,至于内容(消息框、表单、图片等)该如何呈现,easyDialog都不管,内容属于业务层的东西,业务需求是千变万化的,如果逻辑和业务结合很紧密,那么可移植性和可扩展性将大大降低。当然,如果你想找那种集成了模板的弹出层,请移步artDialog,artDialog的模板设计得很精美,功能也是很丰富的,但是体积比较大,压缩后的体积还是有18KB,如果是注重性能的网站,一个弹出层组件有这么大至少对于我来说是没法容忍的,在某些情况下优点恰恰也成了缺点,easyDialog始终保持着超轻量级。

阅读全文 »

让Firefox支持outerHTML的解决方案

<p>对于DOM对象的innerHTML属性想必大家都不会陌生,但是outerHTML用起来相对于会少一点了,innerHTML属性返回的是DOM对象从开始标签到结束标签中所包含的HTML,而outerHTML属性返回的是包括DOM对象本身标签在内的HTML,下图能很好的解释两个属性的区别:</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2011/02/outerhtml_demo.png" alt="innerHTML和outerHTML的区别"></div>
<p>outerHTML最开始是属于IE的私有属性,可以查看MSDN上的说明:<a href="http://msdn.microsoft.com/en-us/library/ms534310%28VS.85%29.aspx" target="_blank">outerHTML Property</a>。目前IE、Chrome、Safari、Opera都能支持这个属性,杯具的是outerHTML不支持Firefox,在Firefox中该属性永远返回undefined。</p>
<p>让Firefox支持outerHTML属性可以通过扩展HTMLElement的原型来实现…</p>

阅读全文 »

Email Suggest 邮箱输入提示

&lt;p&gt;最近的项目会用到登录框邮箱输入提示的功能,于是花了点时间仿照新浪微博的登录框的邮箱提示效果自己写了一个,效果和新浪微博的基本一致,但是实现原理可能会有区别。&lt;/p&gt;
&lt;a href=&quot;http://stylechen.com/wp-content/uploads/demo/email-suggest/index.html&quot; target=&quot;_blank&quot;&gt;查看演示&lt;/a&gt;
&lt;h3&gt;HTML结构部分:&lt;/h3&gt;
&lt;pre class=&quot;brush: c-sharp&quot;&gt;
&amp;lt;div id=&quot;login_box&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;label for=&quot;email&quot;&amp;gt;电子邮箱:&amp;lt;/label&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;input type=&quot;text&quot; id=&quot;email&quot; autocomplete=&quot;off&quot; /&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/div&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;ul id=&quot;email_list&quot;&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;请选择邮箱类型&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@163.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@126.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@qq.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@yahoo.com.cn&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@gmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@sohu.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;lt;li&amp;gt;@hotmail.com&amp;lt;/li&amp;gt;
&amp;nbsp;&amp;nbsp;&amp;lt;/ul&amp;gt;
&amp;lt;/div&amp;gt;
&lt;/pre&gt;
&lt;p&gt;与新浪微博不同的是,我将邮箱后缀都先写在了结构中,然后用把邮箱后缀取出来存到一个数组中。上面input标签中的autocomplete=&quot;off&quot;属性是用来关闭浏览器默认的cookie提示的,如果不关闭这个提示将会弹出2个层,新浪微博的就没有关闭,这应该算是一个BUG吧。&lt;/p&gt;

阅读全文 »
第 14 页,共 18 页« 最新...1213141516...最旧 »