基本上，我在一个一页的网站上工作，我希望将菜单包含在该网站中。当用户单击链接时，页面将滚动到锚点。但是似乎每次页面都不会滚动到正确的位置。它从中返回的值offset().top小于实际位置。我检查了许多在线教程，但仍然无法弄清楚。
<!DOCTYPE html>
<html>
<head>
<title>Letsport</title>
<meta charset = "UTF-8">
<link rel="stylesheet" type="text/css" href="style/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src = "script/script.js"></script>
</head>
<body>
<nav id = "side_nav">
<div id = "nav_content">
<div id = "cross_btn">
<a href="#">
<img src="img/cross.png">
</a>
</div>
<ul>
<li><a href="#" id = "home_link">HOME</a></li>
<li><a href="#" id = "download_link">DOWNLOAD</a></li>
<li><a href="#" id = "contact_link">CONTACT</a></li>
</ul>
</div>
</nav>
<div id = "overlay">
</div>
<section id = "home_section"> …基本上,我正在做一个看起来像这样的项目:
当鼠标在图像上移动时,div内的图像将通过动画放大,但只应显示div内部的图像部分,并且应剪切外部部分.根据div的宽度和高度,有没有办法剪辑图像？在我的情况下,它只在鼠标悬停在它上面时放大,但它没有被剪裁.
$('.thumbnail').on('mouseover',
function() {
$(this).find('.thumb_pic').addClass('hover_effect');
}
);
$('.thumbnail').on('mouseout',
function() {
$(this).find('.thumb_pic').removeClass('hover_effect');
}
);.thumbnail {
display: inline-block;
position: relative;
}
.thumb_pic {
width: 500px;
padding: 5px;
transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
}
.hover_effect {
transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-webkit-transform: scale(1.2, 1.2);
}
.mask {
opacity: 0;
position: absolute;
top: 5px;
left: 5px;
width: 500px;
height: 500px; …