<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //div盒子对象
            var div = $('.box');
            //初始化居中
            go_center(div);
            //浏览器有变动的时候居中
            window.onresize = function(){
                go_center(div);
            }
            function go_center(obj){
                var clientW = $(window).width();//浏览器宽度
                var clientH = $(window).height();//浏览器高度
                var width = obj.width();//div对象的宽
                var height = obj.height();//div对象的高
                //设置对象的top、left值
                obj.css({
                    left: (clientW-width)/2,
                    top:  (clientH-height)/2,
                });
            }
                        //点击div以外的地方隐藏
            $(document).click(function() {
                div.hide();
            });
            //阻止事件冒泡
            div.click(function(event) {
                event.stopPropagation();
            })
        })
    </script>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            background: red;
            height: 200px;
            width: 200px;
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

点击下载源码

jquery validate自定义验证规则

jQuery.validator.addMethod("check_user", function(value, element) { var check = /^[A-Za-z\s]+$/; //this.optional(element)如果元素...

阅读全文

jquery-fancybox JavaScript图片库,支持pc,响应式

官网地址 http://fancyapps.com/fancybox/3/ document:http://fancyapps.com/fancybox/3/docs/#usage github https://github.com/fancyapps/fancybox 兼容性 ...

阅读全文

jquery 瀑布流插件 masonry

github https://github.com/desandro/masonry Masonry Cascading grid layout library Masonry works by placing elements in optimal position based on a...

阅读全文

欢迎留言