Heim >Web-Frontend >js-Tutorial >HTML+CSS+JQuery erzielt einen Floor-Scrolling-Effekt
Dieses Mal bringe ich Ihnen HTML+CSS+JQuery, um den Floor-Scrolling-Effekt zu erzielen. Was sind die Vorsichtsmaßnahmen über HTML+CSS+JQuery, um den Floor-Scrolling-Effekt zu erzielen? , lass uns einen Blick darauf werfen.
html:
<!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) }) })();
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere spannende Inhalte zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!
Empfohlene Lektüre:
JS implementiert die Positionierungsnavigationsleiste
So erstellen Sie einen Paging-Effekt mit jquery
Was tun, wenn jQuery beim Hinzufügen eines Elements das Bindungsereignis nicht auslösen kann
Regelmäßige Verifizierungsformel für Mobiltelefonnummer
Das obige ist der detaillierte Inhalt vonHTML+CSS+JQuery erzielt einen Floor-Scrolling-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!