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