[英]Need help fixing Dynamic Position of Image JS
I have been working on a JS project where a sun goes around an image in a circle, and based on its position a higher index div will change opacity to make it darker or lighter. 我一直在研究一个JS项目,在这个项目中,太阳围绕一个圆圈中的图像,并且根据其位置,较高的索引div将改变不透明度以使其更暗或更亮。 My problem is; 我的问题是; while at one point the Sun moved in a circle, it no longer does. 虽然在某一点上太阳移动了一圈,但它不再存在。 I have tried many things to fix this, but to no avail. 我已经尝试了很多东西来解决这个问题,但无济于事。 My documented code is as follows: 我记录的代码如下:
<style>
sun{
position: absolute;
z-index: 1;
}
dark-light{
z-index: 2;
}
</style>
CSS:^ JS:v 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>
PS I know no JQuery. PS我不知道JQuery。 Edit: The position of all is absolute, 0,0 is the top left corner of the page. 编辑:全部的位置是绝对的,0,0是页面的左上角。 I made sure not to deal with negatives. 我确保不要处理否定。 The sun should be absolute to the page, as its in nothing. 太阳应该是页面的绝对,因为它没有任何东西。
Ok, I figured out that I apparently am not too good with css, and after adding in style="position:absolute";
好吧,我发现我显然对css不太好,并且在添加了style="position:absolute";
it now works fine. 它现在工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.