需要帮助修复图像JS的动态位置
Need help fixing Dynamic Position of Image JS
我一直在做一个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";
中添加后,它现在工作得很好。
相关文章:
- JS动态添加字段-删除按钮不起作用
- 尝试使用Node.js动态路由从IMDB中抓取电影内容.但是在我的output.json文件中没有定义
- 使用Knockout.js动态更改facebook数据
- Three.js |动态生成BezierCurve
- 使用d3plus.js动态更改网络图表
- 如何为 Flot JS 动态创建数据集
- 角度 JS 动态选项卡字段
- 进度条.js动态设置文本
- 使用vue.js动态设置v-for
- D3.js-动态更改序数刻度
- URL重写Node js-动态URL
- 如何使用JS动态更新innerHTML
- PHP/JS:动态Dropboxes和回显SELECTED值
- 使用chart.js动态添加图表
- JSON值使用process.env[node.js]动态更新
- 如何在ng-options中添加两个索引,并使用Angular.js动态设置值
- 使用 eval() JS 动态创建对象
- D3.js动态设置节点可见性
- 挖空.js动态生成的 HTML 没有得到更新
- JS - 动态选择视频坐标