我目前正在開發(fā)一個(gè)項(xiàng)目，需要通過(guò)使用相對(duì)于每個(gè)角的按鈕將圖像移動(dòng)到屏幕的每個(gè)角。圖像從左上角（西北）開始，然后通過(guò)單擊東北按鈕，它會(huì)移動(dòng)到右上角等。即使我通過(guò)在按鈕中添加警報(bào)來(lái)確認(rèn)按鈕工作，我似乎也無(wú)法讓圖像移動(dòng)。圖像上顯示的文本我也需要隨圖像一起移動(dòng)，但此時(shí)我只專注于讓圖像移動(dòng)。任何幫助，將不勝感激。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貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊
我最終得到了這個(gè)：
$(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'});
});
});
效果很好。但我對(duì) jquery 沒有任何經(jīng)驗(yàn)，因?yàn)槲覍?duì) html 還很陌生。我知道 jquery 是一種更新的方法，但是我如何使我的原始代碼工作。我想在傳遞它之前先了解它。
皈依舞
TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊
這是一個(gè)帶有工作版本的 JS 小提琴：https ://jsfiddle.net/dhr6wa2s/
$(document).ready(function(){
var img = $('#image');
$('#neast').on('click',function(){
img.css('right','0');
});
});根據(jù)需要更改其他職位的 jQuery 代碼。
- 2 回答
- 0 關(guān)注
- 147 瀏覽
添加回答
舉報(bào)
0/150
提交
取消