您的位置：首页 > Web前端 > JavaScript

js控制下的飘窗

2015-07-06 12:27 645 查看

今天有学员反映说昨天去面试，有个考官问他会写飘窗吗？在反复的斟酌之后，她回答了不会。然后考官问她，有没有什么思路？她竟然说老师没教过！！！

到底还是小女生，其实考官的目的很明显，他的目的是想知道你的思考能力和解决问题的思路，毕竟不可能面试到的所有问题你都是接触过或研究过的。

最后重点说下，这个飘窗，小寻哥是真的教过，只不过当时觉得太简单，所以一笔带过，想不到啊，想不到啊。。。

早上一生气，特意带全班同学重新写了一遍，顺便贴上这处代码，其实很简单，重点的是思路，思路啊！

<!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.图片放上自己喜欢的即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航