Jquery 在调整窗口大小时设置多个div的动画
所以我在一个个人网站上工作,在定位方面遇到了一些问题 理想情况下,这就是我希望该网站的外观。然而,现在,每当窗口调整大小时,从主中心图像弹出的按钮都不会停留在窗口上。我解决这个问题的想法是,在1000px窗口中设置所有内容,然后有一个函数,在加载时触发,每当调整大小时,将按钮“调整大小”——1000像素向左移动 如果有人能帮助这项工作,或者指出代码哪里出错,我将不胜感激 相关HTMLJquery 在调整窗口大小时设置多个div的动画,jquery,Jquery,所以我在一个个人网站上工作,在定位方面遇到了一些问题 理想情况下,这就是我希望该网站的外观。然而,现在,每当窗口调整大小时,从主中心图像弹出的按钮都不会停留在窗口上。我解决这个问题的想法是,在1000px窗口中设置所有内容,然后有一个函数,在加载时触发,每当调整大小时,将按钮“调整大小”——1000像素向左移动 如果有人能帮助这项工作,或者指出代码哪里出错,我将不胜感激 相关HTML <div class = "mobile"> <div id= "titlehead"
<div class = "mobile">
<div id= "titlehead">
<img src = "./images/Tilehead.png" alt="headtitle">
</div>
<div id= "illustrationb">
<a href = "Illustrations.html">
<img src = "./images/IllustrationBanner.png"
onmouseover="this.src='./images/Bannerc-1.png'"
onmouseout="this.src='./images/IllustrationBanner.png'"></a>
</div>
<div id= "aboutb">
<a href = "Illustrations.html">
<img src = "./images/Banner-4.png"
onmouseover="this.src='./images/Bannerc-4.png'"
onmouseout="this.src='./images/Banner-4.png'"></a>
</div>
<div id= "photob">
<a href = "Illustrations.html">
<img src = "./images/Banner-3.png"
onmouseover="this.src='./images/Bannerc-2.png'"
onmouseout="this.src='./images/Banner-3.png'"></a>
</div>
<div id= "infob">
<a href = "Illustrations.html">
<img src = "./images/Banner-2.png"
onmouseover="this.src='./images/Bannerc-3.png'"
onmouseout="this.src='./images/Banner-2.png'"></a>
</div>
</div>
图像是静态大小吗?如果是这样,将其包装成div,将position设置为relative,并绝对定位按钮 如果你创建了一个JS提琴,我可以通过示例向你展示。。我还没有把图片上传到网上。我可以把它们扔到imgur上,如果那样能帮上大忙的话。定位到目前为止对我不起作用的产品。
$(document).ready(function){
var $xMove = window.width - 1000
var $mobile = $('.mobile')
if(window.width > 1000){
$($mobile).animate({
left: "+=" + $xMove
})
}
}
$(window).resize(function){
var $xMove = window.width - 1000
var $mobile = $('.mobile')
if(window.width > 1000){
$($mobile).animate({
left: "+=" + $xMove
})
}
}
$(document).ready(function(){
$(window).on('resize', function(){
var windowsize = $(window).width();
if (windowsize > 1000)
{
//do this
//do that..
}
else
{
//do this
//do that..
}
});
});