Question

所以基本上就是我编辑atm

的页面

http://coralines.co.vu/

取决于当你将鼠标悬停在猫眼上时，你的眼睛眨眼，或者有两个随机的黑点在虚空中盘旋。我想弄清楚的是如何制造它以使后者不会发生。我试图找出如何制作它，以便在页面尺寸发生变化时，悬停物体与猫/背景图像保持一致，而不是远离它。从而使闪烁的猫对所有尺寸的屏幕都具有通用性。

这里是悬停对象的代码

#cateyes {
  position: fixed;
 margin-top:-280px;
  margin-left:1088px;
opacity:1;


-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

#cateyes:hover{
  margin-top:-270px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  }

这里是背景图片的编码

body{
 background-color: {color:background};
 background-image: url('{image:background}');
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: bottom right;

margin:0px;
color:{color:text};
font-family:times;
font-size:10px;
line-height:100%;
z-index:2;

}

我认为可能将cateyes放在右下角然后弄乱边缘会起作用但每次我尝试做位置：右下角没有任何反应。任何帮助将不胜感激。

Answer 1

你将猫眼定位为从左边缘固定。如果你根据保证金权利对它们进行定位，它应该按照你的要求进行吗？

如果那不起作用...... 另一种选择是获取包含猫图像的元素的位置并将眼睛设置为

position:absolute;

并使用此代码的变体：

window.onload = categoryButton;
window.onresize = categoryButton;
function categoryButton()
{
    var determineLocation = $('#categoryDiv').position();
    var divWidth = $("#categoryDiv").width();
    $('#addCategoryDiv').css(
    {
        position:'absolute',
        top: determineLocation.top + 'px',
        left: determineLocation.left + divWidth + 'px'
    }
    )
    if(navigator.userAgent.search('Firefox') >= 0)
    {
        $('#addCategoryDiv').css(
        {
            left: determineLocation.left + divWidth - 80 + 'px'
        }
        )
    }
}

#addCategoryDiv是你的猫眼，而#categoryDiv是你的猫

我之前使用此代码将表单放在网站上的表单中。如果调整窗口大小，它将保留您设置的元素

上面的代码根据我的“categoryDiv”div元素放置了我的“addCategory”div元素，并且“addCategory”的位置仍然固定在“categoryDiv”的位置，即使调整窗口大小。

该函数的第二部分测试使用的浏览器是否为Firefox，如果是，则减去80px（这是出于视觉原因）。如果需要，您可以添加其他浏览器，我只需要为我的项目使用特定的浏览器（更多信息：http://www.quirksmode.org/js/detect.html）还有其他方法可以执行此操作。

无论如何，这对我有用，希望它可以帮助你

如何将悬停对象锚定到背景图像

1 个答案: