css3利用transform變形結(jié)合事件完成扇形導(dǎo)航
發(fā)布時(shí)間：2020-10-26 15:54:13 作者：web前端趙老師 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了css3利用transform變形結(jié)合事件完成扇形導(dǎo)航,幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下
這個(gè)案例因?yàn)閷?xiě)錯(cuò)了一個(gè)transition的單詞，害得我花了一個(gè)下午的時(shí)間，真的眼睛都瞎了，以后不要再犯這種低級(jí)錯(cuò)誤 >_<
一、知識(shí)點(diǎn)分析
1、APDiv定位布局
2、點(diǎn)擊事件下的transition和transform的效果。
3、每個(gè)小圖標(biāo)的left和top值的計(jì)算。
4、點(diǎn)擊小圖標(biāo)后圖標(biāo)的transition事件偵聽(tīng)。
二、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;
//鼠標(biāo)點(diǎn)擊每個(gè)小圖標(biāo)的時(shí)候
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); //每點(diǎn)擊一個(gè)小圖片，添加一個(gè)事件偵聽(tīng)。當(dāng)事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)，恢復(fù)默認(rèn)值，移除事件偵聽(tīng)。
function end(){
this.style.transition="0.1s";
this.style.transform="scale(1) rotate(720deg)";
this.style.opacity=1;
removeEnd(this,end);
}
//點(diǎn)擊home圖標(biāo)的時(shí)候，第一次順時(shí)針，第二次逆時(shí)針旋轉(zhuǎn)。
oHome.onclick=function(){
if(onOff)
{
this.style.transform="rotate(360deg)";
//設(shè)置每個(gè)圖片的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";
//每個(gè)圖片有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";
//圖片倒序收回。每個(gè)圖片有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值。勾股定理，已知夾角和斜邊，獲取對(duì)邊的長(zhǎng)度：sin(弧度)*斜邊。側(cè)邊的長(zhǎng)度：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);
//返回兩個(gè)值的時(shí)候，用對(duì)象的方式。
return{
"l":ileft,
"t":iTop
}
}
//添加end和移除end函數(shù)。對(duì)transition事件做監(jiān)聽(tīng)。
function addEnd(obj,fn){
obj.addEventListener("transitionend",fn,false);
}
function removeEnd(obj,fn){
obj.removeEventListener("transitionend",fn,false);
}
完整頁(yè)面代碼
<!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;
//鼠標(biāo)點(diǎn)擊每個(gè)小圖標(biāo)的時(shí)候
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); //每點(diǎn)擊一個(gè)小圖片，添加一個(gè)事件偵聽(tīng)。當(dāng)事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)，恢復(fù)默認(rèn)值，移除事件偵聽(tīng)。
function end(){
this.style.transition="0.1s";
this.style.transform="scale(1) rotate(720deg)";
this.style.opacity=1;
removeEnd(this,end);
}
//點(diǎn)擊home圖標(biāo)的時(shí)候，第一次順時(shí)針，第二次逆時(shí)針旋轉(zhuǎn)。
oHome.onclick=function(){
if(onOff)
{
this.style.transform="rotate(360deg)";
//設(shè)置每個(gè)圖片的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";
//每個(gè)圖片有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";
//圖片倒序收回。每個(gè)圖片有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值。勾股定理，已知夾角和斜邊，獲取對(duì)邊的長(zhǎng)度：sin(弧度)*斜邊。側(cè)邊的長(zhǎng)度：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);
//返回兩個(gè)值的時(shí)候，用對(duì)象的方式。
return{
"l":ileft,
"t":iTop
}
}
//添加end和移除end函數(shù)。對(duì)transition事件做監(jiān)聽(tīng)。
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)航的詳細(xì)內(nèi)容，更多關(guān)于css3 扇形導(dǎo)航的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
CSS3的常見(jiàn)transformation圖形變化用法小結(jié)
這篇文章主要介紹了CSS3的常見(jiàn)transformation圖形變化用法小結(jié),共整理了旋轉(zhuǎn)、縮放、平移、傾斜以及矩陣的使用方法,需要的朋友可以參考下2016-05-13css3中transform屬性實(shí)現(xiàn)的4種功能
在CSS3中，可以利用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4中類(lèi)型的變形處理。本文就詳細(xì)的介紹了這4種實(shí)現(xiàn)，感興趣的可以了解一下2021-08-05
css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實(shí)現(xiàn)圓點(diǎn)分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可2021-04-29css3 transform過(guò)渡抖動(dòng)問(wèn)題解決
這篇文章主要介紹了css3 transform過(guò)渡抖動(dòng)問(wèn)題解決,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)2020-10-23
css3 利用transform打造走動(dòng)的2D時(shí)鐘
這篇文章主要介紹了css3 利用transform打造走動(dòng)的2D時(shí)鐘，幫助大家更好的利用cSS3制作特效，美化自身網(wǎng)頁(yè)，感興趣的朋友可以了解下2020-10-20
css3中2D轉(zhuǎn)換之有趣的transform形變效果
在CSS3中，transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換，可以利用transform功能實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動(dòng)這4中類(lèi)型的形變處理，本文給大家介紹css3中2D轉(zhuǎn)換之有趣2022-02-18
