jquery - 如何将视频添加到灯箱？-6ren

jquery - 如何将视频添加到灯箱？

转载作者：行者123 更新时间：2023-11-28 13:50:47

我对这一切都是陌生的，我肯定会努力变得更好!我尝试添加到此灯箱中的视频是我的新广告:(http://www.gatorgraphix.com/uploads/5/1/7/6/5176322/gator_graphix_commercial.mp4)但我无法将它放入我的灯箱并自动播放。你能帮我吗？？这是我的脚本:

<htmL>
    <head>
        <title>Gator Graphix™ Commercial</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

        <style type="text/css">

        body
        {
             font-family: Helvetica, Arial;
        }

        .backdrop
    {
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background:#000;
            opacity: .0;
            filter:alpha(opacity=0);
            z-index:50;
            display:none;
        }


        .box
        {
            position:absolute;
            top:20%;
            left:30%;
            width:640px;
            height:310px;
            background:#ffffff;
            z-index:51;
            padding:10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow:0px 0px 5px #444444;
            -webkit-box-shadow:0px 0px 5px #444444;
            box-shadow:0px 0px 5px #444444;
            display:none;

        }

        .close
        {
            float:right;
            margin-right:6px;
            cursor:pointer;
        }

        </style>

        <script type="text/javascript">

            $(document).ready(function(){

                $('.lightbox').click(function(){
                     $('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
                     $('.box').animate({'opacity':'1.00'}, 300, 'linear');
                     $('.backdrop, .box').css('display', 'block');

                });

                $('.close').click(function(){
                    close_box();

                });

                $('.backdrop').click(function(){
                    close_box();

                });

            });


            function close_box()
            {
                $('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear', function(){
                        $('.backdrop, .box').css('display', 'none');
                    });
            }

        </script>

    <Head>
    <body>

    <h1>Gator Graphix™ Commercial</h1>
    <a href="#" class="lightbox">Click To View Our New Commercial</a>

    <div class="backdrop"></div>
    <div class="box"><div class="close">x</div>Gator Graphix™ Commercial</div>

    </body>
</html>