【前端】js 在浏览器窗口飘来飘去的div

本文介绍了如何使用JavaScript在浏览器窗口中实现一个div元素自动飘动并触边反弹的效果,同时该div内部还有背景图片轮播功能。当鼠标悬停在div上时,div会停止移动和轮播。
摘要由CSDN通过智能技术生成

实现以下功能:

1.div自动飘来飘去 + 触及窗口边界反弹

基本思想就是在window.onload方法内使用setInterval()函数,用:

var windowWidth = window.innerWidth;

var windowHeight = window.innerHeight;

获取当前的窗口大小。

此部分js代码如下:

//调用下面的飘动方法,此句写在window.onload()中
var interval = setInterval("move()", 18);
  //move方法的具体实现
  var x_dir = 1;
  var y_dir = 1;
  var speed = 1;
  var secret = document.getElementById("secret");

  function move() {

    // console.log(window.innerWidth + "x" + window.innerHeight);
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    // console.log(secret.style.left + "x" + secret.style.top);

    //此时向右
    if (x_dir == 1) {

     
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值