ホームページ >ウェブフロントエンド >jsチュートリアル >html+css+jqueryでフロアスクロール効果を実現
html+css+jqueryでフロアスクロール効果を実現
- php中世界最好的语言オリジナル
- 2018-03-15 11:54:422898ブラウズ
今回は、床のスクロール効果を実現するための html+css+jquery について説明します。 床のスクロール効果を実現するために html+css+jquery を使用するための 注意事項 は何ですか。以下は実際のケースです。 。
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)
})
})(); この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
要素を追加するときに jQuery がバインド イベントをトリガーできない場合の対処方法
以上がhtml+css+jqueryでフロアスクロール効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。