彩世界平台-彩世界时时app-彩世界开奖app苹果下载

热门关键词: 彩世界平台,彩世界时时app,彩世界开奖app苹果下载

您的位置:彩世界平台 > 学会党委 > 【彩世界开奖app苹果下载】jQuery插件jRumble实现网

【彩世界开奖app苹果下载】jQuery插件jRumble实现网

发布时间:2019-08-30 09:34编辑:学会党委浏览(108)

    jQuery插件jRumble实现网页元素抖动

       jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上,或者div上,你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动,插件可定制性还是蛮高的。PS:此插件在IE中还存在一些小问题

      jQuery jRumble是使用方法

      ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    <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>

      jRumble的参数配置

      Option Default Description

      rangeX 2 Set the horizontal rumble range (pixels)

      rangeY 2 Set the vertical rumble range (pixels)

      rangeRot 1 Set the rotation range (degrees)

      rumbleSpeed 10 Set the speed/frequency in milliseconds of the rumble (lower number = faster)

      rumbleEvent ‘hover' Set the event that triggers the rumble (‘hover', ‘click',‘mousedown', ‘constant')

      posX ‘left' If using jRumble on a fixed or absolute positioned element, choose ‘left' or ‘right' to match your CSS

      posY ‘top' If using jRumble on a fixed or absolute positioned element, choose ‘top' or ‘bottom' to match your CSS

      jquery-jrumble.js源码

      ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    119

    120

    121

    122

    123

    124

    125

    126

    127

    128

    129

    130

    131

    132

    133

    134

    135

    136

    137

    138

    139

    140

    141

    142

    143

    144

    145

    146

    147

    148

    149

    150

    151

    152

    153

    154

    155

    156

    157

    158

    159

    160

    161

    162

    163

    164

    165

    166

    167

    168

    169

    170

    171

    172

    173

    174

    175

    176

    177

    178

    179

    180

    181

    182

    183

    184

    185

    186

    187

    188

    189

    /*

    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);

      在线演示

      源码下载

      以上所述就是本文的全部内容了,希望大家能够喜欢。

    jRumble,它能让网页上的任意元素抖动起来,在你的网站中使用这个效果会有很大的机率吸引用户的注意力...

    本文由彩世界平台发布于学会党委,转载请注明出处:【彩世界开奖app苹果下载】jQuery插件jRumble实现网

    关键词:

上一篇:JavaScript中toString()方法的使用详解

下一篇:没有了