雨夜带刀's Blog

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!' );
	});

基于jQuery的鼠标悬停时放大图片的效果制作

<p>这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动。这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示:</p>
<div class="art_inner_img"><img src="http://stylechen.com/wp-content/uploads/2010/09/jquery-image-hover-zoom-demo.jpg" alt="基于jQuery的鼠标悬停时放大图片的效果演示" /></div>

基于jQuery的滑动式动画导航栏

在欣赏一些Flash动画网站的时候,发现了很多不错的动画效果,本博虽然并不执迷于动画效果,但是一些不错的滑动的导航栏效果还是挺不错的。今天刚好碰到一个这样的项目,我觉得如果用这种滑动效果的话肯定很不错。折腾了半天,碰上了几个问题,看来自己还得努力学习。在这里我把这个效果分享给大家,如果有更好的解决办法,可以留言告诉我。

先看看实际效果的演示

基于jQuery的滑动式动画导航栏
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。