前端菜鸟的编程之路
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端菜鸟的编程之路相关的知识,希望对你有一定的参考价值。
<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块在执行完动画之后,都会被移除,源代码在上方...
以上是关于前端菜鸟的编程之路的主要内容,如果未能解决你的问题,请参考以下文章