【前端】javascript實現導航欄筋斗雲效果特效

来源:http://www.cnblogs.com/dragonir/archive/2017/10/29/7750382.html
-Advertisement-
Play Games

實現效果: 實現效果如下圖所示 實現原理: 什麼是筋斗雲效果: 這個效果很簡單,就是滑鼠移到其他導航目錄時會有背景圖片跟著滑鼠滑動到當前的目錄。 實現思路: 滑鼠經過的時候,利用offsetLeft獲得當前盒子距離左側的距離,把這個值賦給緩動動畫的end值。 當點擊的時候記住當前的offsetLef ...


實現效果:

  實現效果如下圖所示

實現原理:

什麼是筋斗雲效果:

  • 這個效果很簡單,就是滑鼠移到其他導航目錄時會有背景圖片跟著滑鼠滑動到當前的目錄。

實現思路:

  • 滑鼠經過的時候,利用offsetLeft獲得當前盒子距離左側的距離,把這個值賦給緩動動畫的end值。 
  • 當點擊的時候記住當前的offsetLeft值,當滑鼠經過的時候把之前點擊的offsetLeft給現在經過時候的值。

實現代碼:

  下麵是實現代碼以及詳細註釋,核心設置一個position為absolute的span標簽,通過綁定滑鼠事件,用封裝好的animate動畫實現span的“筋斗雲”效果。

<!DOCTYPE html>
<html>
<head>
	<title>導航欄筋斗雲效果</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{
			background-color: rgba(0, 0, 0, 0.6);
		}
		.box{
			width: 415px;
			height: 42px;
			margin: 200px auto;
			background-color: #fff;
			position: relative;
		}
		ul{
			list-style: none;
			position: relative;
		}
		li{
			float: left;
			width: 83px;
			height: 42px;
			text-align: center;
			font: 500 15px/42px "微軟雅黑";
			cursor: pointer;
		}
		span{
			position: absolute;
			left: 0;
			top: 0;
			width: 83px;
			height: 42px;
			background-image: linear-gradient(to right,#03c03c 50% ,#51ee5d 100%);
		}
	</style>
</head>
<body>
<div class="box">
	<span></span>
	<ul>
		<li>菜單欄1</li>
		<li>菜單欄2</li>
		<li>菜單欄3</li>
		<li>菜單欄4</li>
		<li>菜單欄5</li>
	</ul>
</div>

<script type="text/javascript">
	window.onload = function(){
		// 滑鼠放在哪個li上面,span對應一道到哪裡,移開後回到原位置
		var liArr = document.getElementsByTagName("li");
		var liWidth = liArr[0].offsetWidth;
		var span = document.getElementsByTagName("span")[0];
		// 計數器
		var cnt = 0;

		// for迴圈綁定事件
		for(var i=0; i<liArr.length; i++){
			// 自定義屬性,然後綁定index屬性為索引值
			liArr[i].index = i;
			// 滑鼠進入事件
			liArr[i].onmouseover = function(){
				// 然span運動到該li的索引值位置
				animate(span, this.index*liWidth);
			}
			// 滑鼠移開
			liArr[i].onmouseout = function(){
				// span運動到原位置
				animate(span, cnt*liWidth);
			}
			// 點擊事件
			liArr[i].onclick = function(){
				// 計數器記錄當前標簽索引值
				cnt = this.index;
				animate(span, cnt*liWidth);
			}
		}

		// 緩動動畫封裝
		function animate(element, target){
			// 清除間歇調用
			clearInterval(element.timer);
			// 設置超時調用
			element.timer = setInterval(function(){
				// 設置步數
				var step = (target - element.offsetLeft)/10;
				// 調整步數
				step = step > 0 ? Math.ceil(step) : Math.floor(step);
				// 設置樣式
				element.style.left = element.offsetLeft + step + "px";
				// console.log(1);
				if(Math.abs(target - element.offsetLeft) < Math.abs(step)){
					element.style.left = target + "px";
					clearInterval(element.timer);
				}
			}, 20);
		}

	}
</script>
</body>
</html>

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 備註:第一次翻譯技術文章,標題都糾結了好久不知道腫麽翻譯,如發現翻譯不當之處,可點擊github鏈接提交評論,thx~ 前幾天我為一個項目寫README文檔,我希望其他開發者能夠看到這個項目,並從中學到一些東西。突然我意識到,若放在幾年前,我寫作的過程中隨口提到的Node,npm,Homebrew, ...
  • 一.介紹 本篇是續上一篇的,引用類型的後篇,本篇主要是說基本包裝類型和個體內置對象。如果你能收穫一些知識,那我很高興,很滿足,哈哈哈,希望大家能愉快看完。如果你想學好一門技術,要不忘初心,方得始終。 二.基本包裝類型 先說明基本包裝類型也是屬於引用類型,是接著上一篇的,強調一下. 然後我們記住兩句話 ...
  • ## 寫在前面 因為對Vue.js很感興趣,而且平時工作的技術棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,並做了總結與輸出。 文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answer ...
  • 一、交換兩個數字的值 我們交換兩個數字的值想到的方法一般就是用一個新的變變數,讓他把一個數存起來,然後在交換兩個數字的值,看下麵這種。 看下麵這段代碼,也可以交換兩個數字的值,如果這樣寫你會不會發現特別高大上。 二、數組的排序 1.數組方法中的sort排序方法。 這是數組方法中的sort排序方法,如 ...
  • 想成為一個高效的Web開發者嗎?來看看大牛分享的經驗吧~ 作為一個軟(ku)件(bi)工(de)程(ma)師(nong),你有沒有覺得做什麼事都沒時間?沒時間學習新東西,沒時間去回顧、整理原來寫的爛代碼,沒時間寫單元測試,沒時間給接管你項目的家伙寫文檔,沒時間思考,沒時間喘氣,沒!時!間! 額……如 ...
  • 這篇文章介紹十款讓 Web 前端開發人員生活更輕鬆的實用工具。每個Web開發人員都有自己的工具箱,這樣工作中碰到的每個問題都有一個好的解決方案供選擇。 對於每一項工作,開發人員需要特定的輔助工具,所以如果下麵這些工具對於你來說都是新的領域,那麼這篇文章是非常有用的,因為這些實用的工具將讓你的工作更有 ...
  • Layer layer是一款近年來備受青睞的web彈層組件,她具備全方位的解決方案,致力於服務各水平段的開發人員,您的頁面會輕鬆地擁有豐富友好的操作體驗。 在與同類組件的比較中,layer總是能輕易獲勝。她儘可能地在以更少的代碼展現更強健的功能,且格外註重性能的提升、易用和實用性! 如果,你初識la ...
  • 前端安全之XSS 轉載請註明出處:unclekeith: "前端安全之XSS" XSS定義 XSS, 即為(Cross Site Scripting), 中文名為跨站腳本, 是發生在 目標用戶的瀏覽器 層面上的,當渲染DOM樹的過程成發生了 不在預期內 執行的JS代碼時,就發生了XSS攻擊。 跨站腳 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...