jquery는 앵커 포인트 오프셋 value_javascript 기술을 기반으로 애니메이션 전환을 구현합니다.
- WBOY원래의
- 2016-05-16 16:36:221401검색
다들 앵커 포인트를 사용해 보셨을 거라 믿습니다! 클릭 후 전환이 빡빡해서 짜증나지 않나요?
앵커 포인트 오프셋 값을 기반으로 애니메이션 전환을 구현하는 약간의 트릭을 공유해 보겠습니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style>
*{ margin:0; padding:0;}
.main{ width:1000px; margin:0 auto; position:relative; }
.main img{ float:left;}
.bg{ position:absolute; width:100%; z-index:-5;}
.bg01{ height:885px;background:url(../images/b_01.jpg) no-repeat center;}
.bg02{ height:938px;background:url(../images/b_04.jpg) no-repeat center; }
.bg03{ height:946px;background:url(../images/b_02.jpg) no-repeat center; }
.bg04{ height:946px;background:url(../images/b_03.jpg) no-repeat center; }
.div_scoll{ position:fixed; width:50px; height:200px; right:100px; top:50%;}
a{ display:block; background:#3F6; color:#000; width:50px; height:50px; }
</style>
</head>
<body>
<div class="wrapper">
<div class="main">
<div id="tab_01" class="tab"><img src="images/m_01.jpg" alt="" /></div>
<div id="tab_02" class="tab"><img src="images/m_04.jpg" alt="" /></div>
<div id="tab_03" class="tab"><img src="images/m_02.jpg" alt="" /></div>
<div id="tab_04" class="tab"><img src="images/m_03.jpg" alt="" /></div>
</div>
<div class="bg">
<div class="bg01" id="bg01"></div>
<div class="bg02" id="bg02"></div>
<div class="bg03" id="bg03"></div>
<div class="bg04" id="bg04"></div>
</div>
</div>
<div class="div_scoll">
<a href="#bg01">图1</a>
<a href="#bg02">图2</a>
<a href="#bg03">图3</a>
<a href="#bg04">图4</a>
</div>
<script>
$(function(){
$(".div_scoll a").click(function(){
$("html,body").animate({ scrollTop:$($(this).attr("href")).offset().top + "px"},1000);
});
});
</script>
</body>
</html>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.