我制作了一个可拖动的背景,效果很好。我还需要向其添加按钮。我需要按钮相应地随背景移动(这是一张有一些地方的 map )。
现在我有一个可拖动的背景和上面的按钮,但按钮并没有随之移动。我怎样才能做到这一点?我试图在互联网上搜索但没有发现任何有用的东西。请帮忙。
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
$(document).ready(function() {
var $bg = $('.bg-img'),
data = $('#data')[0],
elbounds = {
w: parseInt($bg.width()),
h: parseInt($bg.height())
},
bounds = {
w: 4000 - elbounds.w,
h: 3000 - elbounds.h
},
origin = {
x: 0,
y: 0
},
start = {
x: 0,
y: 0
},
movecontinue = false;
function move(e) {
var inbounds = {
x: false,
y: false
},
offset = {
x: start.x - (origin.x - e.clientX),
y: start.y - (origin.y - e.clientY)
};
data.value = 'X: ' + offset.x + ', Y: ' + offset.y;
inbounds.x = (offset.x * -1) < bounds.w;
inbounds.y = (offset.y * -1) < bounds.h;
if (movecontinue && inbounds.x && inbounds.y) {
start.x = offset.x;
start.y = offset.y;
$(this).css('background-position', start.x + 'px ' + start.y + 'px');
}
origin.x = e.clientX;
origin.y = e.clientY;
e.stopPropagation();
return false;
}
function handle(e) {
movecontinue = false;
$bg.unbind('mousemove', move);
if (e.type == 'mousedown') {
origin.x = e.clientX;
origin.y = e.clientY;
movecontinue = true;
$bg.bind('mousemove', move);
} else {
$(document.body).focus();
}
e.stopPropagation();
return false;
}
function reset() {
start = {
x: 0,
y: 0
};
$(this).css('backgroundPosition', '0 0');
}
$bg.bind('mousedown mouseup mouseleave', handle);
$bg.bind('dblclick', reset);
});
div.bg-img {
background-image: url("https://map.snapchat.com/static/sharepreview.jpg");
background-position: 0 0;
background-repeat: no-repeat;
background-color: white;
border: 1px solid #aaa;
width: 1900px;
height: 800px;
margin: 25px auto;
}
p,
#data {
text-align: center;
}
#data {
background: black;
font-weight: bold;
color: white;
padding: 5px;
font-size: 1.4em;
border: 1px solid #fff;
}
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.popup .popuptext {
visibility: hidden;
width: 500px;
height: 400px;
//background-color: #555;
background-image: url("mostpeople.jpg");
color: #000;
text-align: left;
border-radius: 20px;
padding: 20px;
z-index: 1;
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
margin-left: -80px;
}
/* Popup arrow
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ------------------------------------------------popup*/
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 15px;
color: #000;
text-transform: uppercase;
overflow-x: hidden;
}
h1 {
font-size: 80px;
text-align: right;
position: bottom;
right: 340px;
top: 300px;
font-weight: normal;
}
button {
background-color: #FF0000;
/* red */
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 6px;
margin: 1px 1px;
cursor: pointer;
float: right;
}
.button1 {
border-radius: 100%;
position: absolute;
left: 300px;
top: 500px;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="bg-img">
<div class="popup" onclick="myFunction()"><button class="button button1"></button>
<span class="popuptext" id="myPopup">text of popup;</span>
</div>
</div>
<p>
<input type="text" id="data" />
</p>
最佳答案
在这一行之后:
$(this).css('background-position', start.x + 'px ' + start.y + 'px');
添加这个:
let buttonStartLeft = 300;
let buttonStartRight = 500;
$('.button1').css('left', (buttonStartLeft + start.x) + 'px');
$('.button1').css('top', (buttonStartRight + start.y) + 'px');
这两个变量只是您为按钮提供的 css 位置的副本,其余的只是将按钮移动到与背景移动相同的位置。
关于javascript - 将按钮添加到移动/拖动的背景 HTML/CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59453248/