樓梯導航/線上諮詢特效
// 樓梯導航,線上諮詢
<!-- 樓梯導航 -->
<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
- 70. 爬樓梯
- [Python手撕]爬樓梯Python
- 超級樓梯 hd 2041
- 第二章 :查詢與排序-------2.16 解題實戰_小白上樓梯(遞迴設計)排序遞迴
- 【前端】javascript實現導航欄筋斗雲效果特效前端JavaScript特效
- [演算法] 一、爬樓梯演算法
- hdu.2042 超級樓梯
- 力扣---70. 爬樓梯力扣
- LeetCode 70題 爬樓梯 -- JavaScriptLeetCodeJavaScript
- 樓梯有n個臺階,上樓可以一步上1階,也可以一步上兩階。一共有多少種上樓的方法?
- (39/60)DP基礎、斐波那契數、爬樓梯、用最小花費爬樓梯
- JavaScript原生實現樓梯外掛JavaScript
- 746. 使用最小花費爬樓梯
- 2020-11-08(70. 爬樓梯)
- LeetCode每日一題:爬樓梯(No.70)LeetCode每日一題
- 線上問診 Python、FastAPI、Neo4j — 問題諮詢PythonASTAPI
- 緬北正規實體新百勝線上諮詢15687933456
- 艾瑞諮詢:2020年中國線上導購平臺行業研究報告(附下載)行業
- [Python手撕]使用最小花費爬樓梯Python
- LCR 088. 使用最小花費爬樓梯
- 我用演算法學golang(爬樓梯)演算法Golang
- 746. 使用最小花費爬樓梯 ( dp )
- LeetCode-746 使用最小花費爬樓梯LeetCode
- Sementic Kernel 案例之網梯科技線上教育
- 【導航】讀書導航
- ON1 Effects 2023:讓照片特效更上一層樓 mac啟用版特效Mac
- 程式碼隨想錄day32 || 509 斐波那契數列,70 爬樓梯,746 最小代價爬樓梯
- 離線查詢與線上查詢
- 使用 JavaScript 解決經典爬樓梯問題JavaScript
- flutter 自定義tab導航-頂部導航-底部導航Flutter
- 線上直播原始碼,自定義導航欄並固定居中對齊原始碼
- jQuery和css3全屏彈出式導航選單特效外掛jQueryCSSS3特效