基于jQuery鼠标经过弹出圆环菜单代码

分享一款基于jQuery鼠标经过弹出圆环菜单代码。这是一款基于mobilyblocks插件实现的圆环菜单特效。效果图如下:

在线预览    源码下载

实现的代码。

html代码:


 <div id="content">
        <div class="nature">
            <h1>主菜单</h1>
            <ul class="reset">
                <li><a href="http://www.w2bc.com/shili/">站长素材</a></li>
                <li><a href="http://www.w2bc.com/shili/">jqeury下载</a></li>
                <li><a href="http://www.w2bc.com/shili/">jquery插件</a></li>
                <li><a href="http://www.w2bc.com/shili/">jquery教程</a></li>
                <li><a href="http://www.w2bc.com/shili/">站长随记</a></li>
                <li><a href="http://www.w2bc.com/shili/">留言</a></li>
                <li><a href="http://www.w2bc.com/shili/">jQ大神</a></li>
            </ul>
        </div>
    </div>

js代码:

  $(function () {
            $('.nature').mobilyblocks({
                trigger: 'hover', //触发的方式
                direction: 'counter', //动画方向
                duration: 500,  //动画持续时间
                zIndex: 50,  //z-inde值
                widthMultiplier: 1.15  //宽度的倍数
            });
        });

via:http://www.w2bc.com/article/91811

在线预览    源码下载

爱编程-编程爱好者经验分享平台
版权所有 爱编程 © Copyright 2012. All Rights Reserved.
闽ICP备12017094号-3