• [置顶] 分享一个JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)


    多的不说了,直奔主题,分享一个放大效果的popup dialog,项目中可以根据自己的需求来写css,我打算复用到metro风格的site上去。

    看起来动画效果还是比较cool的,如果加上了处理后的效果更佳:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
        <style>
    body { background: #ace; font: 12px/1.2 Arial, Helvetica, sans-serif; }
    
    ul li { background:#fff; margin:5px; 100px; height:100px; float:left; }
    
    #transition {
        background:transparent;
        display:none;
        position:absolute; top:50%; left:50%; z-index:50;
        z-index: 10001;
    }
    #content {
        background:#fff;
        border:1px solid #666;
        margin:-50px 0 0 -50px;
        100px; height:100px;
        z-index: 10001;
    }
    
    #mask{
        position: absolute;
        top: 0;
        left: 0;
         100%;
        height: 100%;
        background-color: #000000;
        display: none;
        z-index: 10000;
    }
    
    .close
    {
        30px;
        height:20px;
    
        background-color:Red;
        cursor:pointer;
        display:none;
    }
    
    .closeShow
    {
        30px;
        height:20px;
        margin-left:50px;
        margin-top:-100px;
        background-color:Red;
        cursor:pointer;
    }
        </style>
    
        <script type="text/javascript">
    
            $(document).ready(function () {
                $('ul li').click(function (e) {
                    $("#mask").fadeTo(500, 0.25);
                    $("#content").html("<div>Loading....</div>");
                    var $t = $('#transition'),
                        to = $(this).offset();
                    var height = $(document).height();
                    var width = $(document).width();
    
                    $('#content').css({  100, height: 100 });
                    $t.css({
                        top: to.top + 50,
                        left: to.left + 50,
                        display: 'block'
                    }).animate({
                        top: height / 2,
                        left: width / 2
                    }, 600, function () {
                        $(this).animate({
                            top: 125,
                            left: 175
                        }, 600);
                        $('#content').animate({
                             width * 0.8,
                            height: height * 0.8
                        }, 600, function () {
                            // open dialog here
                            $("#content").html("<div>Hello, please put content here.</div>");
                        });
                    });
                });
    
                $('#transition').click(function (e) {
                    $("#transition").hide();
                    $("#mask").hide();
                });
    
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
    
    <ul>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
        <li>thumb</li>
    </ul>
    <div id='mask'></div>
    <div id="transition"><div id="content">Loading....</div></div>
    
    
        </form>
    </body>
    </html>


     

    加入了mask效果,如果不需要可以直接删掉。

    效果截图:

    http://my.csdn.net/my/album/detail/1640243

    http://my.csdn.net/my/album/detail/1640244

    http://my.csdn.net/my/album/detail/1640244#1640245

  • 相关阅读:
    Java三大框架
    单例模式和工厂模式(百度文库)
    使用java代码编辑oracle数据库
    extends 与implements的区别和用法
    介绍MVC编程架构模式
    接口具体是什么东西
    Servlet和JSP的本质和区别
    用户注册,登录,留言系统
    页面跳转的五种方法
    cookie的长度和限制数量
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3047816.html
Copyright © 2020-2023  润新知