首页 > 代码库 > 常用jquery记录

常用jquery记录

1.jquery easing

jQuery Easing是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动、幻灯片切换等场景应用比较多。它非常小巧,且有多种动画方案供选择,使用简单,而且免费。

引入Easing js文件

该插件基于jQuery,所以需要同时引入jQuery库文件和Easing js文件。

<script type="text/javascript" src=http://www.mamicode.com/"js/jquery.min.js"></script> 
<script type="text/javascript" src=http://www.mamicode.com/"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"

版本:jQuery v1.4+jQuery Transit v0.9.12
  • 查看 Demo
  • 下载 jQuery Transit v0.9.12
  • 官网下载
  • 提交问题 / Bug / 建议
 

使用方法

载入 JavaScript 文件

<script src=http://www.mamicode.com/‘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(){}
});

相关信息

作者网站:
http://ricostacruz.com/jquery.transit/
相关文档:
Github
中文文档
授权协议:
MIT
4.实例分析
故宫博物院  <foot>-->浏览建议     : http://www.dpm.org.cn/explore/ancients

常用jquery记录