jq插件

作者: 西兰花伟大炮 | 来源:发表于2017-06-17 18:33 被阅读32次
    (1)使div垂直水平居中的插件
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;}
        </style>
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    </head>
    <body>
        <div class="box"></div>
    
        <script>
        //使div水平垂直居中的插件
        $.centerToScreen = {
            center:function(obj){
                obj.css({
                    'left':($(window).width()-obj.width())/2,
                    'top':($(window).height()-obj.height())/2,
                    'position':'absolute'
                })
            }
        }
    
        var div = $('.box');
        $.centerToScreen.center(div);
        </script>
    </body>
    </html>
    

    (2)回到顶部插件

    给指定的按钮选择器绑定一个函数,即可实现效果


    实现这种缓动效果,运用到了每次减去当前量的五分之一,有一个减速效果


    image.png

    相关文章

      网友评论

          本文标题:jq插件

          本文链接:https://www.haomeiwen.com/subject/borbqxtx.html