樓梯導航/線上諮詢特效
// 樓梯導航,線上諮詢
<!-- 樓梯導航 -->
<ul class='wmsFloor'>
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
<li>6F</li>
<li>7F</li>
<li>8F</li>
<li>9F</li>
<li>10F</li>
</ul>
</div>
<!-- 線上諮詢 -->
<div>
<div style="color: #fff" class='wmsContact' title='展開'>
手機淘寶
</div>
<div class='wmsOpen'>
<div class='wmsX'>X</div>
</div>
</div>
$(window).scroll(function(){
// console.log($(window).scrollTop())
if($(window).scrollTop()>1176 &&$(window).scrollTop()<5457){
$('.wmsFloor ').css("display","block")
}else {
$('.wmsFloor ').css("display","none")
}
var a=$(window).scrollTop();
// console.log(a)
if(1176<a && a<1580){
$('.wmsFloor li').eq(0).css('color','#b81c2b').siblings().css('color','#858685')
}else if(1580<=a && a<1960){
$('.wmsFloor li').eq(1).css('color','#b81c2b').siblings().css('color','#858685')
}else if(1960<a && a<2487){
$('.wmsFloor li').eq(2).css('color','#b81c2b').siblings().css('color','#858685')
}else if(2487<a && a<2879){
$('.wmsFloor li').eq(3).css('color','#b81c2b').siblings().css('color','#858685')
}else if(2879<a && a<3271){
$('.wmsFloor li').eq(4).css('color','#b81c2b').siblings().css('color','#858685')
}else if(3271<a && a<3792){
$('.wmsFloor li').eq(5).css('color','#b81c2b').siblings().css('color','#858685')
}else if(3792<a && a<4183){
$('.wmsFloor li').eq(6).css('color','#b81c2b').siblings().css('color','#858685')
}else if(4183<a && a<4573){
$('.wmsFloor li').eq(7).css('color','#b81c2b').siblings().css('color','#858685')
}else if(4573<a && a<5094){
$('.wmsFloor li').eq(8).css('color','#b81c2b').siblings().css('color','#858685')
}else if(5094<a){
$('.wmsFloor li').eq(9).css('color','#b81c2b').siblings().css('color','#858685')
}
})
$('.wmsFloor li').each(function(i,ele){
$(ele).click(function(){
var i=$(ele).index();
var a='#wms'+(i+1);
// console.log(a);
$('body,html').animate({scrollTop:$(a).offset().top},500);
})
});
$('.wmsContact').click(function(){
$('.wmsOpen').animate({'right':'0'},500)
})
$('.wmsOpen').click(function(){
$('.wmsOpen').animate({'right':'-200px'},500)
})
相關文章
- 導航特效特效
- IntersectionObserver + scrollIntoView 實現電梯導航ServerView
- 上樓梯演算法演算法
- 谷歌子公司推出新款機器人,可以爬樓梯擦樓梯谷歌機器人
- [演算法] 一、爬樓梯演算法
- leetcode 70 爬樓梯LeetCode
- [Python手撕]爬樓梯Python
- (39/60)DP基礎、斐波那契數、爬樓梯、用最小花費爬樓梯
- JavaScript原生實現樓梯外掛JavaScript
- 如何實現園區路線導航?園區樓宇地圖導航如何實現?地圖
- 【前端】javascript實現導航欄筋斗雲效果特效前端JavaScript特效
- 【讀書】領導梯隊-領導梯隊模型模型
- LeetCode 70題 爬樓梯 -- JavaScriptLeetCodeJavaScript
- [CareerCup] 9.1 Climbing Staircase 爬樓梯AI
- 746. 使用最小花費爬樓梯
- 我用演算法學golang(爬樓梯)演算法Golang
- 爬樓梯(LintCode Climbing Stairs)AI
- LeetCode每日一題:爬樓梯(No.70)LeetCode每日一題
- 使用 JavaScript 解決經典爬樓梯問題JavaScript
- C++遞迴演算法之爬樓梯C++遞迴演算法
- LCR 088. 使用最小花費爬樓梯
- [Python手撕]使用最小花費爬樓梯Python
- 程式碼隨想錄day32 || 509 斐波那契數列,70 爬樓梯,746 最小代價爬樓梯
- Climbing Stairs 爬樓梯問題,每次可以走1或2步,爬上n層樓梯總方法 (變相fibonacci)AI
- LeetCode-746 使用最小花費爬樓梯LeetCode
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- 讓我們一起啃演算法----爬樓梯演算法
- 在 2D 橫向卷軸遊戲裡上下樓梯遊戲
- 增補部落格 第十九篇 python 爬樓梯Python
- 第二章 :查詢與排序-------2.16 解題實戰_小白上樓梯(遞迴設計)排序遞迴
- 比較爽的導航查詢 功能 - SqlSugar ORMSqlSugarORM
- DukuanCMS_網址導航,導航網站,網址導航原始碼網站原始碼
- 波士頓諮詢:具有強大目標的領導力
- 德勤諮詢:汽車工程步入由軟體領航的新時代
- Python演算法:如何解決樓梯臺階問題Python演算法
- 線上問診 Python、FastAPI、Neo4j — 問題諮詢PythonASTAPI
- 品途諮詢:線上票務網站案例研究——大麥網網站
- jquery導航jQuery