常用jquery記錄
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"
使用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"
- 查看 Demo
- 下載 jQuery Transit v0.9.12
- 官網下載
- 提交問題 / Bug / 建議
使用方法
載入 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(){}
});
相關信息
- 作者網站：
- http://ricostacruz.com/jquery.transit/
- 相關文檔：
- Github
- 中文文檔
- 授權協議：
- MIT
- 4.實例分析
- 故宮博物院 <foot>-->瀏覽建議 ： http://www.dpm.org.cn/explore/ancients
常用jquery記錄