使用按钮移动图像
我目前正在开发一个项目，需要通过使用相对于每个角的按钮将图像移动到屏幕的每个角。图像从左上角（西北）开始，然后通过单击东北按钮，它会移动到右上角等。即使我通过在按钮中添加警报来确认按钮工作，我似乎也无法让图像移动。图像上显示的文本我也需要随图像一起移动，但此时我只专注于让图像移动。任何帮助，将不胜感激。
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回答
-
繁花如伊
我最终得到了这个：$(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 是一种更新的方法，但是我如何使我的原始代码工作。我想在传递它之前先了解它。 -
皈依舞
这是一个带有工作版本的 JS 小提琴：https ://jsfiddle.net/dhr6wa2s/$(document).ready(function(){ var img = $('#image'); $('#neast').on('click',function(){ img.css('right','0'); }); });根据需要更改其他职位的 jQuery 代码。
随时随地看视频慕课网APP
相关分类
Html5