我目前正在开发一个项目，需要通过使用相对于每个角的按钮将图像移动到屏幕的每个角。图像从左上角（西北）开始，然后通过单击东北按钮，它会移动到右上角等。即使我通过在按钮中添加警报来确认按钮工作，我似乎也无法让图像移动。图像上显示的文本我也需要随图像一起移动，但此时我只专注于让图像移动。任何帮助，将不胜感激。HTML：!DOCTYPE html><html lang = "en"> <head> <title> Paragraph over image centered </title> <meta charset = "utf-8"> <style> .container{ position: relative; top: 0%; left: 0%; color: white; font-size: 20px; } .text { max-width: 20ch; position: absolute; top: 150px; left: 210px; transform: translate(-50%, -50%); } img { filter: grayscale(100%); } </style><script src="ParagraphOverImageWithButtons.js"></script> </head> <body> <div class="container"> <img id="MyImage" src="MyImage.jpg" alt="MyImage" style="width:25%;"> <div class="text"> Lines of text Lines of text Lines of text Lines of text Lines of text Lines of text Lines of text Lines of text Lines of text </div> </div> <input type="button" value="North West" onclick="NWfunction()"> <input type="button" value="North East" onclick="NEfunction()"> <input type="button" value="South East" onclick="SEfunction()"> <input type="button" value="South West" onclick="SWfunction()"> <a href='http://cis337-0217.cisdprogram.com/Index.html'> Return to Index </a> </body></html>JS：function NWfunction(){document.getElementById("MyImage").style.top="150px";document.getElementById("MyImage").style.left="210px";}function NEfunction(){document.getElementById("MyImage").style.top="150px";document.getElementById("MyImage").style.left="1500px";}function SEfunction(){document.getElementById("MyImage").style.top="1500px";document.getElementById("MyImage").style.left="1500px";}function SWfunction(){document.getElementById("MyImage").style.top="1500px";document.getElementById("MyImage").style.left="210px";}
2 回答
繁花如伊
TA贡献2012条经验 获得超12个赞
我最终得到了这个：
$(document).ready(function(){
var img = $('#MyImage');
$('#NWest').on('click',function(){
img.css({top: '0px', left: '0px', position:'absolute'});
});
});
$(document).ready(function(){
var text = $('#MyText');
$('#NWest').on('click',function(){
text.css({top: '150px', left: '245px', position:'absolute'});
});
});
$(document).ready(function(){
var img = $('#MyImage');
$('#NEast').on('click',function(){
img.css({top: '0px', left: '75%', position:'absolute'});
});
});
$(document).ready(function(){
var text = $('#MyText');
$('#NEast').on('click',function(){
text.css({top: '150px', left: '88%', position:'absolute'});
});
});
$(document).ready(function(){
var img = $('#MyImage');
$('#SEast').on('click',function(){
img.css({top: '560px', left: '75%', position:'absolute'});
});
});
$(document).ready(function(){
var text = $('#MyText');
$('#SEast').on('click',function(){
text.css({top: '710px', left: '88%', position:'absolute'});
});
});
$(document).ready(function(){
var img = $('#MyImage');
$('#SWest').on('click',function(){
img.css({top: '560px', left: '0px', position:'absolute'});
});
});
$(document).ready(function(){
var text = $('#MyText');
$('#SWest').on('click',function(){
text.css({top: '710px', left: '245px', position:'absolute'});
});
});
效果很好。但我对 jquery 没有任何经验，因为我对 html 还很陌生。我知道 jquery 是一种更新的方法，但是我如何使我的原始代码工作。我想在传递它之前先了解它。
皈依舞
TA贡献1851条经验 获得超3个赞
这是一个带有工作版本的 JS 小提琴：https ://jsfiddle.net/dhr6wa2s/
$(document).ready(function(){
var img = $('#image');
$('#neast').on('click',function(){
img.css('right','0');
});
});根据需要更改其他职位的 jQuery 代码。
- 2 回答
- 0 关注
- 95 浏览
添加回答
举报
0/150
提交
取消