中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

css3如何利用transform變形結(jié)合事件完成扇形導航-創(chuàng)新互聯(lián)

這篇文章給大家分享的是有關css3如何利用transform變形結(jié)合事件完成扇形導航的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站專注于企業(yè)營銷型網(wǎng)站建設、網(wǎng)站重做改版、克東網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5技術、購物商城網(wǎng)站建設、集團公司官網(wǎng)建設、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為克東等各大城市提供網(wǎng)站開發(fā)制作服務。

這個案例因為寫錯了一個transition的單詞，害得我花了一個下午的時間，真的眼睛都瞎了，以后不要再犯這種低級錯誤  >_<

css3如何利用transform變形結(jié)合事件完成扇形導航

一、知識點分析

1、APDiv定位布局

2、點擊事件下的transition和transform的效果。

3、每個小圖標的left和top值的計算。

4、點擊小圖標后圖標的transition事件偵聽。

二、HTML源代碼

<div id="stage">
  <div id="nav"> 
      <img src="images/1.png"> 
      <img src="images/2.png"> 
      <img src="images/3.png"> 
      <img src="images/4.png"> 
      <img src="images/5.png"> 
  </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>

三、CSS樣式

body {
	margin: 0;
}
body{
	background-color:#eee;}
#stage {
	width: 300px;
	height: 300px;
	position: relative;
	top: 150px;
	margin: 0 auto;
}
#nav {
	position: absolute;
	width: 120px;
	height: 107px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -53px;
}
#nav img {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}
#home {
	position: absolute;
	width: 150px;
	height: 134px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: 0.5s ease-in-out;
	
}
#home img {
	width: 100%;
}

四、JavaScript源代碼

window.onload=function(){
	var oHome=document.getElementById("home");
	var oNav=document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var onOff=true;
	var iR=-260;
	
	//鼠標點擊每個小圖標的時候
	for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //每點擊一個小圖片，添加一個事件偵聽。當事件結(jié)束的時候，執(zhí)行end函數(shù)。
			}
		}
	//事件結(jié)束的時候，執(zhí)行end函數(shù)，恢復默認值，移除事件偵聽。
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//點擊home圖標的時候，第一次順時針，第二次逆時針旋轉(zhuǎn)。
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//設置每個圖片的left和top值。
			for(var i=0;i<imgLen;i++){
				//有30度的起始角度。
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				//每個圖片有100ms的延遲。
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//圖片倒序收回。每個圖片有100ms的延遲。
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//獲得img圖片的left和top值。勾股定理，已知夾角和斜邊，獲取對邊的長度：sin(弧度)*斜邊。側(cè)邊的長度：cos(弧度)*斜邊?；《?角度/180*派。
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//返回兩個值的時候，用對象的方式。
		return{
			"l":ileft,
			"t":iTop
			}
		}
	//添加end和移除end函數(shù)。對transition事件做監(jiān)聽。
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}

完整頁面代碼

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>環(huán)形導航</title>
<style>
body {
	margin: 0;
}
body{
	background-color:#eee;}
#stage {
	width: 300px;
	height: 300px;
	position: relative;
	top: 150px;
	margin: 0 auto;
}
#nav {
	position: absolute;
	width: 120px;
	height: 107px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -53px;
}
#nav img {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}
#home {
	position: absolute;
	width: 150px;
	height: 134px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: 0.5s ease-in-out;
	
}
#home img {
	width: 100%;
}
</style>
<script>
window.onload=function(){
	var oHome=document.getElementById("home");
	var oNav=document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var onOff=true;
	var iR=-260;
	
	//鼠標點擊每個小圖標的時候
	for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //每點擊一個小圖片，添加一個事件偵聽。當事件結(jié)束的時候，執(zhí)行end函數(shù)。
			}
		}
	//事件結(jié)束的時候，執(zhí)行end函數(shù)，恢復默認值，移除事件偵聽。
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//點擊home圖標的時候，第一次順時針，第二次逆時針旋轉(zhuǎn)。
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//設置每個圖片的left和top值。
			for(var i=0;i<imgLen;i++){
				//有30度的起始角度。
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				//每個圖片有100ms的延遲。
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//圖片倒序收回。每個圖片有100ms的延遲。
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//獲得img圖片的left和top值。勾股定理，已知夾角和斜邊，獲取對邊的長度：sin(弧度)*斜邊。側(cè)邊的長度：cos(弧度)*斜邊?；《?角度/180*派。
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//返回兩個值的時候，用對象的方式。
		return{
			"l":ileft,
			"t":iTop
			}
		}
	//添加end和移除end函數(shù)。對transition事件做監(jiān)聽。
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}
	

</script>
</head>

<body>
<div id="stage">
  <div id="nav"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>
</body>
</html>

感謝各位的閱讀！關于“css3如何利用transform變形結(jié)合事件完成扇形導航”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前名稱：css3如何利用transform變形結(jié)合事件完成扇形導航-創(chuàng)新互聯(lián)
鏈接地址：http://www.rwnh.cn/article44/dosdhe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供手機網(wǎng)站建設、網(wǎng)站收錄、關鍵詞優(yōu)化、虛擬主機、電子商務、網(wǎng)頁設計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)
襄城县| 新密市| 汪清县| 九寨沟县| 兴和县| 铁岭县| 崇仁县| 伊通| 秦安县| 岳阳县| 大足县| 萍乡市| 奈曼旗| 旌德县| 兴仁县| 景洪市| 湟源县| 宁化县| 太和县| 通城县| 黑河市| 德江县| 凌海市| 兴仁县| 崇明县| 工布江达县| 平昌县| 烟台市| 和顺县| 封丘县| 浦县| 淅川县| 筠连县| 鄱阳县| 湘潭市| 原平市| 耒阳市| 鹤峰县| 遵义县| 建昌县| 太仆寺旗|