溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
這個(gè)案例因?yàn)閷戝e(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事件偵聽。
二、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è)事件偵聽。當(dāng)事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)，恢復(fù)默認(rèn)值，移除事件偵聽。
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ì)邊的長度：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);
//返回兩個(gè)值的時(shí)候，用對(duì)象的方式。
return{
"l":ileft,
"t":iTop
}
}
//添加end和移除end函數(shù)。對(duì)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;
//鼠標(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è)事件偵聽。當(dāng)事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)。
}
}
//事件結(jié)束的時(shí)候，執(zhí)行end函數(shù)，恢復(fù)默認(rèn)值，移除事件偵聽。
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ì)邊的長度：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);
//返回兩個(gè)值的時(shí)候，用對(duì)象的方式。
return{
"l":ileft,
"t":iTop
}
}
//添加end和移除end函數(shù)。對(duì)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>感謝各位的閱讀！關(guān)于“css3如何利用transform變形結(jié)合事件完成扇形導(dǎo)航”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼