css3利用transform變形結(jié)合事件完成扇形導(dǎo)航
發(fā)布時間：2020-10-26 15:54:13 作者：web前端趙老師 
我要評論
我要評論這篇文章主要介紹了css3利用transform變形結(jié)合事件完成扇形導(dǎo)航,幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
這個案例因為寫錯了一個transition的單詞，害得我花了一個下午的時間，真的眼睛都瞎了，以后不要再犯這種低級錯誤 >_<
一、知識點分析
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); //每點擊一個小圖片，添加一個事件偵聽。當(dāng)事件結(jié)束的時候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時候，執(zhí)行end函數(shù)，恢復(fù)默認值，移除事件偵聽。
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)";
//設(shè)置每個圖片的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)形導(dǎo)航</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); //每點擊一個小圖片，添加一個事件偵聽。當(dāng)事件結(jié)束的時候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時候，執(zhí)行end函數(shù)，恢復(fù)默認值，移除事件偵聽。
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)";
//設(shè)置每個圖片的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é)合事件完成扇形導(dǎo)航的詳細內(nèi)容，更多關(guān)于css3 扇形導(dǎo)航的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
CSS3的常見transformation圖形變化用法小結(jié)
這篇文章主要介紹了CSS3的常見transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下2016-05-13- 在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。本文就詳細的介紹了這4種實現(xiàn)，感興趣的可以了解一下2021-08-05
css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可2021-04-29- 這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-23
這篇文章主要介紹了css3 利用transform打造走動的2D時鐘，幫助大家更好的利用cSS3制作特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-20
css3中2D轉(zhuǎn)換之有趣的transform形變效果
在CSS3中，transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的形變處理，本文給大家介紹css3中2D轉(zhuǎn)換之有趣2022-02-18
