我目前正在開發一個項目，需要通過使用相對于每個角的按鈕將圖像移動到屏幕的每個角。圖像從左上角（西北）開始，然后通過單擊東北按鈕，它會移動到右上角等。即使我通過在按鈕中添加警報來確認按鈕工作，我似乎也無法讓圖像移動。圖像上顯示的文本我也需要隨圖像一起移動，但此時我只專注于讓圖像移動。任何幫助，將不勝感激。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 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消