今天有学员反映说昨天去面试，有个考官问他会写飘窗吗？在反复的斟酌之后，她回答了不会。然后考官问她，有没有什么思路？她竟然说老师没教过！！！
到底还是小女生，其实考官的目的很明显，他的目的是想知道你的思考能力和解决问题的思路，毕竟不可能面试到的所有问题你都是接触过或研究过的。
最后重点说下，这个飘窗，小寻哥是真的教过，只不过当时觉得太简单，所以一笔带过，想不到啊，想不到啊。。。
早上一生气，特意带全班同学重新写了一遍，顺便贴上这处代码，其实很简单，重点的是思路，思路啊！
<!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.图片放上自己喜欢的即可
时间： 2024-11-06 07:48:19