jquery jGravity实现重力感应交互动画效果代码-html代码-BFW代码库

jquery jGravity实现重力感应交互动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery jGravity实现重力感应交互动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <!-- jQuery *Reequired -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script>
    <!-- jGravity file -->
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jGravity-min.js"></script>
    <script>

        $(document).ready(function() {

            $('div.jGravity').live('click', function() {
                // This can be changed to anything you like in order to trigger jGravity effect

                $('body').jGravity({
                    // jGravity works best when targeting the body

                    target: 'everything', // Enter your target critera e.g. 'div, p, span', 'h2' or 'div#specificDiv', or even 'everything' to target everything in the body

                    ignoreClass: 'ignoreMe', // Specify if you would like to use an ignore class, and then specify the class

                    weight: 25, // Enter any number 1-100 ideally (25 is default), you can also use 'heavy' or 'light'

                    depth: 5, // Enter a value between 1-10 ideally (1 is default), this is used to prevent targeting structural divs or other items which may break layout in jGravity

                    drag: true // Decide if users can drag elements which have been effected by jGravity

                });



                // Misc code for demo purposes

                $(this).removeClass('jGravity');

                $(this).delay(1000).queue(function() {

                    $(this).html("<h2>Get jGravity</h2>");

                });

                // ----- \\



            });

        });

    </script>



    <style>

        /* Misc styles used for demo purposes */

        body {
            overflow: hidden;
            margin: 0;
            padding: 0;
            height: 100%;
        }



        div.box {
            height: 100px;
            width: 100px;
            float: left;
            margin: 10px;
            color: white;
            text-align: center;
        }



        div.blackHeader {
            width: 100%;
            clear: both;
            height: 30px;
        }

        div.blackHeader div.headPiece {
            background: #333;
            width: 5%;
            float: left;
            height: 30px;
        }

        div.blackHeader div.headPiece p {
            color: white;
            text-align: center;
            padding-top: 5px;
        }

        div.blackHeader div.headPiece p a {
            color: white;
            text-decoration: none;
        }



        div.logoBar {
            width: 100%;
            clear: both;
            height: 70px;
        }

        div.logoBar div.barPiece {
            background: #F1F1F1;
            width: 20%;
            height: 70px;
            border-bottom: 1px solid #E2E2E2;
            float: left;
        }

        div.logoBar h1 {
            color: #333;
            text-align: center;
            font-size: 30px;
            padding-top: 12px;
            font-weight: normal;
        }

        div.logoBar h1 a {
            color: #333;
            padding-bottom: 2px;
        }



        div.goBtnCentre {
            width: 100%;
            clear: both;
            height: 80px;
            margin: 20px 0;
        }

        div.goButton {
            height: 80px;
            background: #E7534A;
            border: 1px solid #CE2117;
            width.........完整代码请登录后点击上方下载按钮下载查看