JS:利用jq语句实现盒子对角移动

最新推荐文章于 2022-12-15 13:34:05 发布

TNTNT_T

最新推荐文章于 2022-12-15 13:34:05 发布

阅读量683

点赞数 5

文章标签： javascript jquery

本文链接：https://blog.csdn.net/TNTNT_T/article/details/105081139

版权

博主也是在学js，老师出了这么一道题，博主用自己有限的知识，用tranform来实现了盒子的移动效果，这串代码兼容不同大小的浏览器，兼容性挺好的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    div{
      width: 50px;
      height: 50px;
      background-color: yellow;
      position: absolute;
      left:10px;
      top:50px;
    }
  </style>
</head>
<body>
<button id="btn">移动</button>
<div id="ff"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var wid=0;
  var hei=0;
 var offset=$('#ff').offset();
var widd= 0;
var heii=0;
  var ll=widd/heii;
  $('#btn').mouseover(function () {//每当鼠标移动到按钮上就自动获取要移动的长度和宽度，兼容不同大小的浏览器
     widd=$(document).width()-offset.left-document.getElementById('ff').clientWidth;//浏览器的总宽度要减去div这个元素离body元素的宽度，再减去他自身
     heii=$(document).height()-offset.top-document.getElementById('ff').clientHeight;
     ll=widd/heii;//算出宽相比于高要移动多少
  })
  $('#btn').click(function () {
setInterval(function () {//利用循环定时器来实现移动效果
  hei++;
  wid+=ll;
  if (wid>widd&&hei>heii){//当数值超过要移动的长度和宽度时会停下来，精度+-1
    return;
  }
 $("#ff").css("transform",`translate(${wid}px,${hei}px)`);},5);//时间定5毫秒刷新频率很高
  })
</script>
</body>
</html>

如果问题欢迎留言。

TNTNT_T

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS:利用jq语句实现盒子对角移动

博主也是在学js，老师出了这么一道题，博主用自己有限的知识，用tranform来实现了盒子的移动效果，这串代码兼容不同大小的浏览器，兼容性挺好的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&gt...
复制链接

扫一扫