今天有學員反映說昨天去面試，有個考官問他會寫飄窗嗎？在反復的斟酌之后，她回答了不會。然后考官問她，有沒有什么思路？她竟然說老師沒教過！！！
到底還是小女生，其實考官的目的很明顯，他的目的是想知道你的思考能力和解決問題的思路，畢竟不可能面試到的所有問題你都是接觸過或研究過的。
最后重點說下，這個飄窗，小尋哥是真的教過，只不過當時覺得太簡單，所以一筆帶過，想不到啊，想不到啊。。。
早上一生氣，特意帶全班同學重新寫了一遍，順便貼上這處代碼，其實很簡單，重點的是思路，思路啊！
<!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.圖片放上自己喜歡的即可