哎呀吗呀

虽然我的技术菜 但是我对编程有着特殊的爱
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
前端菜鸟的编程之路（2） 
<html>
    <body>
        <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
        <script>
                /*function myfunction() {
                    // var newdiv = document.createElement("div");
                    // var newText = document.createTextNode('你好');
                    // document.body.appendChild("newdiv");
                    // newdiv.id = 'newDIV';
                    // newdiv.classname = 'newDIVClass';
                    // newdiv.setAttribute = ('name', 'newDIVName');
                    // newdiv.style.width = '200px';
                    // newdiv.style.height = '100px';
                    // newdiv.style.position = 'absolute';
                    // newdiv.style.backgroundcolor = 'black';
                    // newdiv.style.display = 'none';
                    // newdiv.appendChild(newText);
                    //var $div = $('<div> </div>');
                    var newdiv = document.createElement('div');
                    newdiv.style.width = '200px';
                    newdiv.style.height = '100px';
                    newdiv.style.position = 'absolute';
                    newdiv.style.backgroundcolor = 'black';
                    newdiv.style.display = 'none';
                    var $div = $(newdiv);
                    $('body').append($div);
                    $div.animate();
                };*/
                // $(function() {
                    //     var div = $('<div></div>').appendTo('body');
                    //     div.css({
                        //         width: '200px',
                        //         height: '200px',
                        //         position: 'absolute',
                        //         background: '#FF0',
                        //         display: 'none'
                    //     });
                // })
                $(function() {
                        $('body').click(function(event) {
                            event.stopPropagation();

                            
                            var $div = $('<div></div>').appendTo('body');
                            //$('body').append($div);//append返回$('body');
                            //$div=$(newdiv);
                            //var newdiv=$('<div></div>')appendTo('body'); 返回appendto前面的那个
                            $div.css({
                                width: '200px',
                                height: '100px',
                                position: 'absolute',
                                background: 'black',
                                display: 'none',
                            });
                            //设置DIV位置
                            var top = ($(window).height() - $div.height()) / 2;
                            var left = ($(window).width() - $div.width()) / 2;
                            var scrollTop = $(document).scrollTop();
                            var scrollLeft = $(document).scrollLeft();
                            $div.css({
                                // position: 'absolute',
                                'top': top + scrollTop,
                                left: left + scrollLeft
                            }).show();
                            //$div.animate({top:'-150px'},"slow","swing",
                               //function(){$div.remove();}); 
                               $div.animate({top:'-150px'},function(){$div.remove()});//【把函数放入对象中】

                        });
                    })
                
                    //点击body,DIV块向上滑动
                    /**$('body').click(function(){
                        $(this).animate({top:'-150px'},"slow")//$('#DIV-1,#DIV-2,#DIV-3')
                    });
                })  */
        </script>
    </body>
</html>

导师让我做一个像发扑克牌一样的demo，意思就是本来窗口是空白的，点击屏幕的任何一个地方，会在屏幕正中间出现一个div块，连续点击连续向上滑动，并且每个div块在执行完动画之后，都会被移除，源代码在上方...

posted on 2016-12-22 12:16  哎呀吗呀  阅读(131)  评论(0)  编辑  收藏  举报