mobilyblocks实现圆形弹出旋转按钮效果代码-html代码-BFW代码库

mobilyblocks实现圆形弹出旋转按钮效果代码

代码语言：html

所属分类：弹出层

代码描述：mobilyblocks实现圆形弹出旋转按钮效果代码

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>


        body {
            font-family: Arial, Helvetica, sans-serif;
            background: #F1F1F1;
        }

        .socials {
            display: block;
            width: 32px;
            height: 32px;
            background: url(//repo.bfw.wiki/bfwrepo/icon/60004740ba4ca.png) no-repeat;
            background-size: cover;
            cursor: pointer;
            position: relative;
        }

        .nature {
            display: block;
            width: 150px;
            height: 150px;

            background: url(//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png) no-repeat;
            background-size: cover;
            cursor: pointer;
            position: relative;
        }

        .socials, .nature {
            margin: 0 auto;
        }

        .socials {
            margin-bottom: 50px;
        }

        ul.reset,
        ul.reset li {
            display: block;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        ul.reset li {
            position: absolute;
        }

        ul.reset li a {
            outline: none;
        }

        #content {
            margin: 100px auto 0;
            width: 560px;
        }


        a {
            color: #FF9900;
        }

        a img {
            border: none;
        }


    </style>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.4.2.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mobilyblocks.js"></script>

    <script type="text/javascript">
        $(function() {

            $('.socials').mobilyblocks();

            $('.nature').mobilyblocks({
                trigger: 'hover',
                direction: 'counter',
                duration: 500,
                zIndex: 50,
                widthMultiplier: 1.15
            });

        });

    </script>

</head>

<body>

    <div id="content">

        <div class="socials">

            <ul class="reset">

                <li><a href="#"><img style="wi.........完整代码请登录后点击上方下载按钮下载查看