个人中心
gpt4 book ai didi

javascript - 使用 javascript 定位 DIV 的 style.left 不起作用

转载 作者：行者123 更新时间：2023-12-02 23:01:35 25 4
gpt4 key购买 nike

我只想在鼠标停止时使 DIV 抖动。所以我想我应该使用 javascript 和一些计时器来设置 style.left 属性。为了模拟鼠标停止，我创建了一个计时器，只要鼠标移动，它就会被设置和清除。当鼠标停止时，计时器不再被清除，并且模拟事件“触发”。这又设置了三个计时器。第一个计时器将 DIV 向左移动 5 个像素。下一个计时器将 DIV 向右移动 5 个像素。最终计时器将 DIV 移回原始位置。

听起来很简单，DIV 的 style.left 属性被写入控制台，控制台报告正确的值。

但是...我从未见过 DIV 移动。为什么？？？

完整代码为:

var jLeft = document.getElementById('jiggle').style.left;

function myMoveFunction() {
  //Keep clearing and setting the timeout event as long as the mouse is in motion.
  //When the mouse stops, the timeout event will fire.
  if (typeof touchTimeout == 'undefined') {
    touchTimeout = setTimeout(myTimeOut, 50);
  } else {
    clearTimeout(touchTimeout);
    touchTimeout = setTimeout(myTimeOut, 50);
  }
  //If the mouse is in motion, clear all jiggling events
  if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft);
  if (typeof jigRight !== 'undefined') clearTimeout(jigRight);
  if (typeof jigZero !== 'undefined') clearTimeout(jigZero);
  console.clear();
}

function myTimeOut() {
  //set up all jiggling events
  setTimeout(jigLeft(), 1);
  setTimeout(jigRight(), 50);
  setTimeout(jigZero(), 99);
}

function jigLeft() {
  jLeft = '45px';
  console.log('Move Left: ' + jLeft);
}

function jigRight() {
  jLeft = '55px';
  console.log('Move Right: ' + jLeft);
}

function jigZero() {
  jLeft = '50px';
  console.log('Move Zero: ' + jLeft);
}
DIV#jiggle {
  position: absolute;
  left: 50px;
  top: 10px;
  width: 500px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero.
    Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam
    nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper
    viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam. Integer placerat non risus et elementum. Phasellus eu orci viverra, aliquet est id, condimentum leo. Nunc ac interdum nunc. Morbi at risus nunc. Morbi semper turpis
    elit, vel lacinia elit congue id. Maecenas cursus, tellus condimentum pulvinar viverra, ante orci placerat erat, vitae pharetra urna neque quis sem. Nullam non sollicitudin ante, at iaculis sem. Mauris sagittis eros dolor, vitae tempus libero gravida
    in. Suspendisse et placerat urna, sed tincidunt nulla. Nam tincidunt pulvinar nisi in condimentum. Sed sem ante, scelerisque eget nulla vitae, elementum mattis turpis. Vestibulum in imperdiet risus. Vestibulum aliquam augue nec tristique pretium.
    Nullam vestibulum, felis ut iaculis interdum, ante enim suscipit justo, ac consequat lacus nulla vel turpis. Sed lacinia, leo vel hendrerit aliquet, elit lectus tempor augue, tincidunt condimentum turpis erat eget ipsum. Nam lectus nibh, laoreet sed
    accumsan nec, ullamcorper suscipit lectus. Cras faucibus in elit vitae interdum. Morbi vulputate sapien lacus, vel aliquet erat posuere nec. Suspendisse non nibh sapien. Nullam pulvinar diam a aliquam placerat. Donec porttitor commodo nulla, vel egestas
    libero facilisis sit amet. Donec eget justo pretium, sagittis ligula in, aliquam orci. Pellentesque ornare purus ut nisi accumsan vehicula. Sed imperdiet dictum odio, in tempor diam rhoncus ut. Mauris vel urna vel turpis cursus facilisis. Suspendisse
    eget posuere dolor, eget vulputate massa. Mauris eget ante ac ante accumsan luctus. Curabitur imperdiet condimentum felis, eget faucibus nisl dapibus eu. Curabitur aliquet consectetur dolor, dapibus hendrerit lectus bibendum in. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Ut ligula nisl, malesuada at tortor at, faucibus maximus dolor. Vivamus condimentum mi at est lobortis, quis pulvinar justo consectetur. Cras eu nunc quis velit placerat consectetur. Quisque dui felis, placerat
    id tempor eget, maximus ut lacus. In ante lacus, luctus vel turpis lobortis, dictum dictum massa. Curabitur rutrum dolor ut tincidunt venenatis. Vivamus aliquam ante quam, non cursus enim sollicitudin vitae. Sed rhoncus metus tempor scelerisque interdum.
    Pellentesque metus mi, varius ac purus et, euismod commodo purus. Donec eu purus consequat, gravida ipsum quis, efficitur eros. Nulla ornare turpis et nulla consectetur feugiat.
  </div>
</body>

</html>

最佳答案

如果您正在寻找固定代码，这里是

HTML

<div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero. Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam.
</div>

CSS

DIV#jiggle{
  position:absolute;
  left:50px;
  top:10px;
  width:500px;
}

JS

var jLeft = document.getElementById('jiggle').style.left;

function myMoveFunction(){
  //Keep clearing and setting the timeout event as long as the mouse is in motion.
  //When the mouse stops, the timeout event will fire.
  if (typeof touchTimeout == 'undefined') {
    touchTimeout = setTimeout(myTimeOut, 50);
  } else {
    clearTimeout(touchTimeout);
    touchTimeout = setTimeout(myTimeOut, 50);
  }
  //If the mouse is in motion, clear all jiggling events
  if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft);
  if (typeof jigRight !== 'undefined') clearTimeout(jigRight);
  if (typeof jigZero !== 'undefined') clearTimeout(jigZero);  
  console.clear();
}

function myTimeOut(){
  //set up all jiggling events
  setTimeout(jigLeft, 1);
  setTimeout(jigRight, 50); 
  setTimeout(jigZero, 99); 
}  

function jigLeft() {
  document.getElementById('jiggle').style.left ='45px';
  console.log('Move Left: ' + jLeft);
}
function jigRight() {
  document.getElementById('jiggle').style.left = '55px';
  console.log('Move Right: ' + jLeft);  
}
function jigZero(){
  document.getElementById('jiggle').style.left = '50px';
  console.log('Move Zero: ' + jLeft);  
}

正如@Quentin 所指出的，您的代码有很多问题。这个答案解决了大部分问题。

这是一个 fiddle :

https://codepen.io/faisalrashid/pen/dybVvdQ

关于javascript - 使用 javascript 定位 DIV 的 style.left 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57760559/

25 4 0
文章推荐： javascript - 我怎样才能使我的变量更改为与下拉菜单中的值相同？
文章推荐： javascript - 加载本地音频文件并使用Audio()播放
文章推荐： jdbc - ElasticSearch JDBC River创建重复项
文章推荐： javascript - 从 Laravel View 将属性传递到 Treeselect vue 组件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com