jRumble, ia boleh membuat sebarang elemen pada halaman web bergegar Menggunakan kesan ini pada tapak web anda akan mempunyai peluang yang tinggi untuk menarik perhatian pengguna. Kesan pemalam ini boleh digunakan pada pautan atau div Anda boleh menetapkan julat gegaran, koordinat XY, amplitud gegaran, dsb. Ia boleh ditetapkan untuk bergetar apabila tetikus bergerak ke atas atau bergetar sepanjang masa secara lalai. PS: Pemalam ini masih mempunyai beberapa masalah kecil dalam IE
jQuery jRumble ialah cara menggunakan
<script type="text/javascript" src="js/jquery-jrumble.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#demo1').jrumble({ rangeX: 2, rangeY: 2, rangeRot: 1 }); $('#demo2').jrumble({ rangeX: 10, rangeY: 10, rangeRot: 4 }); $('#demo3').jrumble({ rangeX: 4, rangeY: 0, rangeRot: 0 }); $('#demo4').jrumble({ rangeX: 0, rangeY: 0, rangeRot: 5 }); $('#demo5').jrumble({ rumbleSpeed: 0 }); $('#demo6').jrumble({ rumbleSpeed: 50 }); $('#demo7').jrumble({ rumbleSpeed: 100 }); $('#demo8').jrumble({ rumbleSpeed: 200 }); $('#demo9').jrumble({ rumbleEvent: 'hover' }); $('#demo10').jrumble({ rumbleEvent: 'click' }); $('#demo11').jrumble({ rumbleEvent: 'mousedown' }); $('#demo12').jrumble({ rumbleEvent: 'constant' }); $('#demo13').jrumble({ posX: 'left', posY: 'top' }); $('#demo14').jrumble({ posX: 'right', posY: 'top' }); $('#demo15').jrumble({ posX: 'left', posY: 'bottom' }); $('#demo16').jrumble({ posX: 'right', posY: 'bottom' }); $('.view-source pre').hide(); $('.view-source a').toggle(function(){ $(this).siblings('pre').stop(false, true).slideDown(500); $(this).html('Hide Source'); }, function(){ $(this).siblings('pre').stop(false, true).slideUp(500); $(this).html('View Source'); }); }); </script>
Konfigurasi parameter jRumble
Pilihan Perihalan Lalai
rangeX 2 Tetapkan julat gemuruh mendatar (piksel)
julatY 2 Tetapkan julat gemuruh menegak (piksel)
rangeRot 1 Tetapkan julat putaran (darjah)
rumbleSpeed 10 Tetapkan kelajuan/kekerapan dalam milisaat gemuruh (nombor rendah = lebih cepat)
rumbleEvent 'hover' Tetapkan acara yang mencetuskan gemuruh ('hover', 'click', 'mousedown', 'constant')
posX 'kiri' Jika menggunakan jRumble pada elemen kedudukan tetap atau mutlak, pilih 'kiri' atau 'kanan' untuk memadankan CSS anda
posY 'atas' Jika menggunakan jRumble pada elemen kedudukan tetap atau mutlak, pilih 'atas' atau 'bawah' untuk memadankan CSS anda
kod sumber jquery-jrumble.js
/* jRumble v1.1 - http://jackrugile.com/jrumble by Jack Rugile - http://jackrugile.com Copyright 2011, Jack Rugile MIT license - http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.jrumble = function(options){ // JRUMBLE OPTIONS //--------------------------------- var defaults = { rangeX: 2, rangeY: 2, rangeRot: 1, rumbleSpeed: 10, rumbleEvent: 'hover', posX: 'left', posY: 'top' }; var opt = $.extend(defaults, options); return this.each(function(){ // VARIABLE DECLARATION //--------------------------------- $obj = $(this); var rumbleInterval; var rangeX = opt.rangeX; var rangeY = opt.rangeY; var rangeRot = opt.rangeRot; rangeX = rangeX*2; rangeY = rangeY*2; rangeRot = rangeRot*2; var rumbleSpeed = opt.rumbleSpeed; var objPosition = $obj.css('position'); var objXrel = opt.posX; var objYrel = opt.posY; var objXmove; var objYmove; var inlineChange; // SET POSITION RELATION IF CHANGED //--------------------------------- if(objXrel === 'left'){ objXmove = parseInt($obj.css('left'),10); } if(objXrel === 'right'){ objXmove = parseInt($obj.css('right'),10); } if(objYrel === 'top'){ objYmove = parseInt($obj.css('top'),10); } if(objYrel === 'bottom'){ objYmove = parseInt($obj.css('bottom'),10); } // RUMBLER FUNCTION //--------------------------------- function rumbler(elem) { var randBool = Math.random(); var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2; var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2; var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2; // IF INLINE, MAKE INLINE-BLOCK FOR ROTATION //--------------------------------- if(elem.css('display') === 'inline'){ inlineChange = true; elem.css('display', 'inline-block') } // ENSURE MOVEMENT //--------------------------------- if(randX === 0 && rangeX !== 0){ if(randBool < .5){ randX = 1; } else { randX = -1; } } if(randY === 0 && rangeY !== 0){ if(randBool < .5){ randY = 1; } else { randY = -1; } } // RUMBLE BASED ON POSITION //--------------------------------- if(objPosition === 'absolute'){ elem.css({'position':'absolute','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); elem.css(objXrel, objXmove+randX+'px'); elem.css(objYrel, objYmove+randY+'px'); } if(objPosition === 'fixed'){ elem.css({'position':'fixed','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); elem.css(objXrel, objXmove+randX+'px'); elem.css(objYrel, objYmove+randY+'px'); } if(objPosition === 'static' || objPosition === 'relative'){ elem.css({'position':'relative','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); elem.css(objXrel, randX+'px'); elem.css(objYrel, randY+'px'); } } // End rumbler function // EVENT TYPES (rumbleEvent) //--------------------------------- var resetRumblerCSS = {'position':objPosition,'-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'}; if(opt.rumbleEvent === 'hover'){ $obj.hover( function() { var rumblee = $(this); rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); }, function() { var rumblee = $(this); clearInterval(rumbleInterval); rumblee.css(resetRumblerCSS); rumblee.css(objXrel, objXmove+'px'); rumblee.css(objYrel, objYmove+'px'); if(inlineChange === true){ rumblee.css('display','inline'); } } ); } if(opt.rumbleEvent === 'click'){ $obj.toggle(function(){ var rumblee = $(this); rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); }, function(){ var rumblee = $(this); clearInterval(rumbleInterval); rumblee.css(resetRumblerCSS); rumblee.css(objXrel, objXmove+'px'); rumblee.css(objYrel, objYmove+'px'); if(inlineChange === true){ rumblee.css('display','inline'); } }); } if(opt.rumbleEvent === 'mousedown'){ $obj.bind({ mousedown: function(){ var rumblee = $(this); rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); }, mouseup: function(){ var rumblee = $(this); clearInterval(rumbleInterval); rumblee.css(resetRumblerCSS); rumblee.css(objXrel, objXmove+'px'); rumblee.css(objYrel, objYmove+'px'); if(inlineChange === true){ rumblee.css('display','inline'); } }, mouseout: function(){ var rumblee = $(this); clearInterval(rumbleInterval); rumblee.css(resetRumblerCSS); rumblee.css(objXrel, objXmove+'px'); rumblee.css(objYrel, objYmove+'px'); if(inlineChange === true){ rumblee.css('display','inline'); } } }); } if(opt.rumbleEvent === 'constant'){ var rumblee = $(this); rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); } }); }; })(jQuery);
Demo dalam talian http://jackrugile.com/jrumble/#demos
Muat turun kod sumber http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip
Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.