您的位置:首页> 实例代码> JS实例

JavaScript随机漂浮碰壁效果

2018-7-6 00:40| 作者: 蚂蚁小编| 查看: 1042| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,实现了元素随机漂浮,在边缘会有触碰效果。

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

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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()一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部