前端JavaScript-随机漂浮碰壁效果

作者: 560b7bb7b879 | 来源:发表于2019-05-16 15:28 被阅读6次

前端JavaScript-随机漂浮碰壁效果
桌球小游戏项目3.0
小球碰壁效果
前端新手项目练习之星星闪烁
前端JavaScript-控制元素简单的淡入淡出效果
随机渐变背景色
漂浮广告效果（原生JS）
ANDROID-漂浮背景效果
原生js漂浮广告效果
iOS使用动画构建海底世界

实现了元素随机漂浮，在边缘会有触碰效果。

代码比较常见于漂浮广告，当然这种广告是不推荐使用的，让人感觉厌烦。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>web前端学习交流扣qun：731771211   志同道合者进</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>