1.jquery easing
jQuery Easing是一款比较老的jQuery插件，在很多网站都有应用，尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧，且有多种动画方案供选择，使用简单，而且免费。
引入Easing js文件
该插件基于jQuery，所以需要同时引入jQuery库文件和Easing js文件。
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
使用jQuery Easing
jQuery Easing是在jQuery原有的动画效果上进行了扩展，所以使用时可以根据jQuery原有的动画函数进行扩展。
1.jQuery默认动画
支持toggle()、slideUp()、slideDown()、show()、hide()等jQuery内置的动画效果，使用代码如下：
$(element).slideUp({
duration: 1000,
easing: method,
complete: callback
});
参数duration：定义动画运动时间，毫秒，其实就是速度，时间越短，运动速度越快。
参数easing：指定动画效果，Easing js提供多种动画效果，有匀速运动、变加速运动、缓冲波动效果，它们是：linear，swing，jswing，easeInQuad，easeOutQuad，easeInOutQuad，easeInCubic， easeOutCubic，easeInOutCubic，easeInQuart，easeOutQuart，easeInOutQuart， easeInQuint，easeOutQuint，easeInOutQuint，easeInSine，easeOutSine， easeInOutSine，easeInExpo，easeOutExpo，easeInOutExpo，easeInCirc， easeOutCirc，easeInOutCirc，easeInElastic，easeOutElastic，easeInOutElastic， easeInBack，easeOutBack，easeInOutBack，easeInBounce，easeOutBounce，easeInOutBounce.各动画实际效果请参照演示demo。
参数complete：动画结束后回调函数callback，可以自定义动画结束后的调用函数。
2.使用jQuery自定义动画函数animate()
jQuery Easing结合jQuery的自定义动画函数animate()可以制作各种你想要的动画效果，使用代码如下：
$(element).animate({
height:500,
width:600
},{
easing: 'easeInOutQuad',
duration: 500,
complete: callback
});
上面的代码定义了一个缓冲效果的动画，我们可以根据项目需要，结合jQuery Easing制作各种动画效果。
2.jquery.mousewheel.js
jQuery Mousewheel Plugin,用于添加跨浏览器的鼠标滚轮支持。
mousewheel事件的处理函数有一点小小的变化，它除了第一个参数event 外，还接收到第二个参数delta。
通过参数delta可以获取鼠标滚轮的方向和速度。
如果delta的值是负的即-1，那么滚轮就是向下滚动，正的1就是向上。
Js代码
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// using bind$('#my_elem').bind('mousewheel', function(event, delta, deltaX, deltaY) {
if (window.console && console.log) {
console.log(delta, deltaX, deltaY);
}
});// using the event helper$('#my_elem').mousewheel(function(event, delta, deltaX, deltaY) {
if (window.console && console.log) {
console.log(delta, deltaX, deltaY);
}
}); |
3.jquery.transit.js
jQuery Transit 使用 CSS3 的新特性来实现过渡效果，比默认的.animate方法要顺畅得多。
因为使用 CSS3 进行过渡效果，所以对不支持 CSS3 的浏览器效果有所下降。
语法和.animate方法相同，因此很好上手。
- 为 jQuery 的 .css 方法支持以下属性：
- x (px)
- y (px)
- translate (x, y)
- rotate (deg)
- rotateX (deg)
- rotateY (deg)
- rotate3d (x, y, z, deg)
- scale (x, [y])
- perspective (px)
- skewX (deg)
- skewY (deg)
PS：对于使用连接符的属性需改为驼峰式写法，或者使用引号包括。如：padding-top属性需写为：paddingTop或者"padding-top"
使用方法
载入 JavaScript 文件
<script src='jquery.transit.js'></script>转换属性
除 jQuery 原本支持的属性外，还新支持一些属性（使用.css方法不会进行动画效果，只是直接改变值）
$("#box").css({ x: '30px'}); // 向右移动
$("#box").css({ y: '60px'}); // 向下移动
$("#box").css({ translate: [60, 30]}); // 向右下移动
$("#box").css({ rotate: '30deg'}); // 顺时针旋转
$("#box").css({ scale: 2}); // 放大2倍 (200%)
$("#box").css({ scale: [2, 1.5]}); // 宽度和高度不同的放大
$("#box").css({ skewX: '30deg'}); // 水平斜切
$("#box").css({ skewY: '30deg'}); // 垂直斜切
$("#box").css({ perspective: 100, rotateX: 30}); // Webkit 3d 旋转
$("#box").css({ rotateY: 30});
$("#box").css({ rotate3d: [1, 1, 0, 45]});
支持相对值
$("#box").css({ rotate: '+=30' }); // 增加30度
$("#box").css({ rotate: '-=30' }); // 减少30度
可以省略单位
$("#box").css({ x: '30px' });
$("#box").css({ x: 30 });
多个值时，可以是数组或者用逗号分隔
$("#box").css({ translate: [60,30] });
$("#box").css({ translate: ['60px','30px'] });
$("#box").css({ translate: '60px,30px' });
支持获取属性值（若属性有多个值，则返回数组）
$("#box").css('rotate'); //=> "30deg"
$("#box").css('translate'); //=> ['60px', '30px']
动画效果 - $.fn.transition
$('...').transition(options, [duration], [easing], [complete])你可以使用$.fn.transition()来进行 css3 动画效果。他和$.fn.animate()的效果一样，只是他使用了 css3 过渡。
$("#box").transition({ opacity: 0.1, scale: 0.3 });
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500); // 动画时长
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 'swing'); // 缓动效果
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear'); // 动画时长 + 缓动效果
$("#box").transition({ opacity: 0.1, scale: 0.3 }, function(){}); // 回调函数
$("#box").transition({ opacity: 0.1, scale: 0.3 }, 500, 'linear', function(){}); // 任意
也可以在参数中配置所有选项
$("#box").transition({
opacity: 0.1, scale: 0.3,
duration: 500,
easing: 'linear',
complete: function(){}
});
相关信息
- 授权协议：
- MIT
- 4.实例分析
- 故宫博物院 <foot>-->浏览建议 ： http://www.dpm.org.cn/explore/ancients