Dieser Artikel stellt hauptsächlich JQuery vor, um den Floor-Scrolling-Effekt im Detail zu realisieren. Er hat einen gewissen Referenzwert.
Das Beispiel dieses Artikels teilt mit Ihnen die JQuery, um den Floor-Scrolling-Effekt zu realisieren Der angezeigte spezifische Code dient als Referenz. Der spezifische Inhalt lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css" rel="external nofollow" >
<style>
#header,#f1,#f2,#f3{
width: 80%;
height: 500px;
background: yellow;
margin-left: 10%;
margin-top: 50px;
}
#f1{
background: green;
}
#f2{
background: red;
}
#f3{
background: blue;
}
#lift{
position: fixed;
top: 280px;
display: none;
}
.lift_btn{
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #000;
}
.hover{
background: red;
}
</style>
</head>
<body>
<p id="header"></p>
<p class="floor" id="f1">
<p>第一层</p>
</p>
<p class="floor" id="f2">
<p>第二层</p>
</p>
<p class="floor" id="f3">
<p>第三层</p>
</p>
<p id="lift">
<ul>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>1</span>
</a>
</li>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>2</span>
</a>
</li>
<li class="lift_item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">
<span>3</span>
</a>
</li>
</ul>
</p>
<script src="js/jquery.min.js"></script>
<script src="js/floor.js"></script>
</body>
</html>js:
(()=>{
var $lift=$("#lift");
$(window).scroll(()=>{
var scrollTop=$('html,body').scrollTop();
var $f1=$("#f1");
var offsetTop=$f1.offset().top;
if(offsetTop<scrollTop+innerHeight/2)
$lift.fadeIn(500);
else
$lift.fadeOut(500);
var $floors=$(".floor");
$floors.each((i,elem)=>{
var $f=$(elem);
if($f.offset().top<scrollTop+innerHeight/2)
$lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover");
});
});
$lift.children("ul").on("click","li",function(){
var $li=$(this);
var i=$li.index();
var $fi=$(".floor:eq("+i+")");
var offsetTop=$fi.offset().top;
$("html").animate({
scrollTop:offsetTop-60
},500)
})
})();Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es Ihnen in Zukunft nützlich sein wird.
Verwandte Artikel:
So implementieren Sie JS-Klassen mithilfe der tangram.js-BibliothekSo implementieren Sie parasitäre kombinierte Vererbung mithilfe von JavaScriptSo implementieren Sie das verzögerte Laden von Bildern, die nicht auf dem ersten Bildschirm angezeigt werden, in JSDas obige ist der detaillierte Inhalt vonSo erzielen Sie mit jquery einen Floor-Scrolling-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
