需要帮助修复图像JS的动态位置

Need help fixing Dynamic Position of Image JS

本文关键字:JS 动态 位置 图像 帮助      更新时间:2024-06-06

我一直在做一个JS项目,在这个项目中,太阳绕着图像转一圈,根据它的位置,索引越高的div会改变不透明度,使其变暗或变亮。我的问题是;当太阳在某一点上作圆周运动时,它不再作圆周运动了。我试了很多办法来解决这个问题,但都无济于事。我的文档代码如下:

<style>
  sun{
    position: absolute;
    z-index: 1;
  }
  dark-light{
    z-index: 2;
  }
</style>

CSS:^JS:v

<script>

  move();
  //calls move

  function move(){
   //set rot
    var rot = 180;
    var pictureToDisplay = prompt('Please insert link to picture to     display','URL Necessary to function properly, but not required. Press enter to continue.');
    //asks user to insert picture link for STATIONARY picture
    var img = document.getElementById('img');
    if (pictureToDisplay == 'URL Necessary to function properly, but not required. Press enter to continue.'){
    }else{
    img.src = pictureToDisplay;
    }
    //Sets stationary picture
    window.setInterval( function() {
      //Repeats every 75 milliseconds forever.
      var obj = document.getElementById('sun');
    // obj. is equal to id sun
      var top = (Math.sin(rot)*500)+500;
      var left = (Math.cos(rot)*500)+500;
      //uses var rot, sine, and cosine to determine moving sun position
      var toppx = top + 'px';
      var leftpx = left + 'px';
      //adds the px after those values
      obj.style.top = toppx;
      obj.style.left = leftpx;
      //attempts to set position of obj (id sun)
      var darkToLight = -0.5+(top/500);
      //determines opacity of div using var top
      //document.write(rot+' = rot : ');
      var lightDiv = document.getElementById('dark-light');
      // same as var obj, but with the div
      lightDiv.style.opacity = darkToLight;
      //sets lightDiv to opacity
      //document.write(toppx,' ,',leftpx,' : ');

    rot = (rot+0.01) % 360;
      //moves rot up by 0.01, modulate 360
    }, 75);
    //back to top of setInterval
  }

</script>

附言:我不知道JQuery。编辑:所有的位置都是绝对的,0,0是页面的左上角。我确保不处理负面的东西。太阳应该是绝对的一页,因为它什么都没有。

好吧,我发现我显然不太擅长css,在style="position:absolute";中添加后,它现在工作得很好。