jquery implementiert die Animationsumschaltung basierend auf den Javascript-Fähigkeiten des Ankerpunktversatzwerts-js-Tutorial-php.cn

jquery implementiert die Animationsumschaltung basierend auf den Javascript-Fähigkeiten des Ankerpunktversatzwerts

WBOY

Freigeben： 2016-05-16 16:36:22

Original

1486 Leute haben es durchsucht

Ich glaube, jeder hat Ankerpunkte verwendet! Ist es nicht ärgerlich, dass das Umschalten nach dem Klicken schwergängig ist?

Lassen Sie uns einen kleinen Trick teilen, um den Animationswechsel basierend auf dem Ankerpunkt-Versatzwert zu implementieren

<!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>

Nach dem Login kopieren