JavaScript随机漂浮碰壁效果
JavaScript随机漂浮碰壁效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，实现了元素随机漂浮，在边缘会有触碰效果。
代码比较常见于漂浮广告，当然这种广告是不推荐使用的，让人感觉厌烦。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
border: 0;
}
#main{
position: absolute;
top: 0;
left: 0;
cursor: pointer;
}
#img{
width: 100px;
height: 120px;
background: #faa;
}
</style>
<script type="text/javascript">
window.onload = function() {
var main = document.getElementById("main");
sy = 0;
speedy = 2;
sx = 0;
speedx = 2;
imgh = 120;
imgw = 100;
winh = document.documentElement.clientHeight;
winw = document.documentElement.clientWidth;
function start() {
sobj = setInterval(function() {
sy += speedy;
sx += speedx;
//y轴运动
if (sy <= 0) {
speedy = -speedy;
}
if (sy >= winh - imgh) {
speedy = -speedy;
sy = winh - imgh;
}
//x轴运动
if (sx <= 0) {
speedx = -speedx;
}
if (sx >= winw - imgw) {
speedx = -speedx;
sx = winw - imgw;
}
main.style.top = sy + 'px';
main.style.left = sx + 'px';
}, 10)
}
start();
main.onmouseover= function() {
clearInterval(sobj);
}
main.onmouseout= function() {
start();
}
}
</script>
</head>
<body>
<div id="main">
<div id="img"></div>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.window.onload = function() {}，当文档内容完全加载完毕再去执行函数中的代码。
（2）.var main = document.getElementById("main")，获取元素对象；本代码用div替代图片，main元素就作为这个图片的父元素。
（3）.sy = 0，声明一个变量并赋值为0，用来存main元素的纵向坐标值。
（4）.speedy = 2，声明一个变量并赋值为2，用来规定纵向运动速度。
（5）.sx = 0，声明一个变量并赋值为0，用来存main元素的横向坐标值。
（6）.speedx = 2，声明一个变量并赋值为2，用来规定横向运动速度。
（7）.imgh = 120,图片的高度。
（8）.imgw = 100，图片的宽度。
（9）.winh = document.documentElement.clientHeight，获取可视区域的高度。
（10）.winw = document.documentElement.clientWidth，获取可视区域的宽度。
（11）.function start() {}，此函数是功能实现的核心。
（12）.sobj = setInterval(function() {},10)，每隔10毫秒执行一次回调函数。
（13）.sy += speedy，设置横向坐标值。
（14）.sx += speedx，设置纵向坐标值。
（15）.if (sy <= 0) {
speedy = -speedy;
}，如果sy小于等于0，当开始速度是正数，这时候肯定是向下运动，必定会向下运动，当快冲出最低端的时候，速度也会取反，变为负数，这样元素就向上运动，当要冲出可是去顶端，那么就将运动速度取反，变为正数，也就会向下运动了。
（16）.if (sy >= winh - imgh) {
speedy = -speedy;
sy = winh - imgh;
}，上面其实已经介绍了，这里不再重复。
（17）.main.onmouseenter = function() {
clearInterval(sobj);
}，当受不了悬浮，会停止运动。
（18）.main.onmouseleave = function() {
start();
}，鼠标离开，开始运动。
二.相关阅读:
（1）.获取浏览器客户区尺寸参阅javascript获取浏览器视口尺寸代码实例一章节。
（2）.onmouseover事件参阅javascript mouseover事件一章节。
（3）.clearInterval()参阅clearInterval()一章节。
（4）.onmouseout事件参阅javascript mouseout事件一章节。
（5）.document.getElementById()参阅document.getElementById()一章节。
JavaScript随机漂浮碰壁效果，这样的场景在实际项目中还是用的比较多的，关于JavaScript随机漂浮碰壁效果就介绍到这了。