Wie enthält ich JavaScript Math.Random -Animation in einem Div/Container?
Posted: 25 Feb 2025, 08:29
Ich versuche, animierte Divs in einem anderen DIV -Container zu enthalten, während ich den Befehl mathematom JavaScript auf einem Mausover verwendete. Dies gilt für eine Squarespace -Site. https://www.shayla-designs.com/home-1
Ich brauche die weißen Blasen mit schwarzem Text, um in der Mitte der Seite zu bleiben, jetzt sie Gehen Sie zur rechten Seite und von der sichtbaren Seite aus. vor class = "snippet-code-js Lang-js hübschesPrint-override">
Ich brauche die weißen Blasen mit schwarzem Text, um in der Mitte der Seite zu bleiben, jetzt sie Gehen Sie zur rechten Seite und von der sichtbaren Seite aus. vor class = "snippet-code-js Lang-js hübschesPrint-override">
Code: Select all
jQuery(function($) {
$('#description1').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});
jQuery(function($) {
$('#description2').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});
jQuery(function($) {
$('#description3').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});
jQuery(function($) {
$('#description4').mouseover(function() {
//var dWidth = $(document).width() - 100, // 100 = image width
//dHeight = $(document).height() - 100, // 100 = image height
var nextX = Math.floor(Math.random() * ($(this).parent().width() - $(this).width() - 1) + 1),
nextY = Math.floor(Math.random() * ($(this).parent().height() - $(this).height() + 1) - 1);
$(this).animate({
left: nextX + 'px',
top: nextY + 'px'
});
});
});< /code>
body {
margin: 0;
padding: 0;
align: center;
background-color: teal;
}
#container {
width: auto;
height: 100px;
margin-left: auto;
margin-right: auto;
padding: 0px;
position: relative;
align-content: center;
}
#description1 {
position: relative;
}
#description2 {
position: relative;
}
#description3 {
position: relative;
}
#description4 {
position: relative;
}< /code>
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum