0

我试图根据屏幕宽度为“.copy”设置不同的“margin-top”值。认为它需要使用 JS 变量进行设置，但可以听取最佳解决方案。

悬停蓝色块看js效果

现有示例：

JS小提琴

JS

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':'80px'});
}, function () { //Frame 3
    $('.copy').animate({'margin-top':'140px'});
});

理想情况下，我想为屏幕宽度设置一个边距顶部，>768px，>1024px，+ 1281px

4

2 回答 2

1

您可以使用媒体查询和转换纯粹使用 CSS 来做到这一点。不需要 JS。http://jsfiddle.net/h6dT2/2/

.thumb {
    background: blue;
    position: absolute;
    height: 200px;
    width: 100%;
}
.copy {
    margin: 0 auto;
    margin-top: 140px;
    opacity: 0;
    width: 200px;
    -webkit-transition: .5s all ease;
}
.thumb:hover .copy {
    margin-top: 80px;
    opacity: 1;
}
body {
    margin: 0px;
    color: #fff;
}
@media (max-width: 1024px) {
    .copy { 
        margin-top: 20px;
    }
}

这并不能解决您问题的所有部分，但它可以让您很好地了解该去哪里。

于 2013-07-17T15:17:34.877 回答
1

你说的是屏幕高度还是屏幕宽度？

如果你想做高度，你可以使用一个百分比值，比如：

'margin-top': '25%'

这将适应高度。

如果要根据宽度进行计算，则需要width()在window

$(window).width();

所以你可以说：

var width = $(window).width();

'margin-top': width

要通过某些屏幕宽度的示例获得更多信息，您可以执行以下操作：

var windowWidth = $(window).width();
var margin= 0; //default value
if(windowWidth > 1281) {
  margin = 100;
}
else if(windowWidth > 1024) {
  margin = 75;
}
else if (windowWidth > 768) {
  margin = 50;
}
else margin = 25;

然后在你的 JQuery 中你可以说：

$('.thumb').hover(function () { //Frame 2
    $('.copy').animate({'margin-top':margin});
}, function () { //Frame 3
    $('.copy').animate({'margin-top': (margin+60) }); //or whatever calculation you want to do for the other value, it's up to you.
});
于 2013-07-17T15:18:22.173 回答