标签：
今天有学员反映说昨天去面试，有个考官问他会写飘窗吗？在反复的斟酌之后，她回答了不会。然后考官问她，有没有什么思路？她竟然说老师没教过！！！
到底还是小女生，其实考官的目的很明显，他的目的是想知道你的思考能力和解决问题的思路，毕竟不可能面试到的所有问题你都是接触过或研究过的。
最后重点说下，这个飘窗，小寻哥是真的教过，只不过当时觉得太简单，所以一笔带过，想不到啊，想不到啊。。。
早上一生气，特意带全班同学重新写了一遍，顺便贴上这处代码，其实很简单，重点的是思路，思路啊！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>飘窗</title> <meta name="Generator" content="飘窗"> <meta name="Author" content="寻方客"> <meta name="Keywords" content="飘窗"> <meta name="Description" content="飘窗 企业级培训 js基础知识"> <meta http-equiv="content-Type" content="text/html;charset=utf-8"> <script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <style type="text/css"> .float_div { position: absolute; } .float_img { width: 200px; height: 200px; } </style> </head> <body> <div class="float_div" > <a href="http://www.cnblogs.com/hyzhao/" target="_blank"><img class="float_img" src="./piaochuang.jpg"></a> </div> <script type="text/javascript"> var intervalX = 1, intervalY = 1; var posX = 0, posY = 0; var interval = 30; var divArr = document.getElementsByTagName("div"); var floatDivObj = null; //这里是为了演示js的for/in才这样使用,实际中应该对飘窗设置id,节省资源 for(var i in divArr){ if(divArr[i].getAttribute("class") == "float_div"){ floatDivObj = divArr[i]; break; } } window.setInterval("float()", 50); function float() { posX += (interval * intervalX); posY += (interval * intervalY); //演示js和jquery下获取class对象的方式 $(".float_div").css("top", posY); $(".float_div").css("left", posX); if (posX < 1 || posX + floatDivObj.offsetWidth > $(window).width()) { intervalX = -intervalX; } if (posY < 1 || posY + floatDivObj.offsetHeight + 5 > $(window).height()) { intervalY = -intervalY; } } </script> </body> </html>
这里写的比较粗糙，实际上还可以更精简，但是思路是没什么大的差别，小寻哥这里啰嗦下：看代码不要只看代码，更要去理解，去揣摩其中的思考方式！
备注：
1.jquery-1.7.2.min.js大家可以自行从网上下载
2.图片放上自己喜欢的即可
标签：
原文地址：http://www.cnblogs.com/hyzhao/p/4624067.html
