欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js+css實(shí)現(xiàn)扇形導(dǎo)航效果

 更新時(shí)間：2020年08月18日 11:50:35   作者：SeanHit  
這篇文章主要為大家詳細(xì)介紹了js+css實(shí)現(xiàn)扇形導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js+css實(shí)現(xiàn)扇形導(dǎo)航效果的具體代碼，供大家參考，具體內(nèi)容如下\

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>扇形導(dǎo)航</title>
 <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  html,body{
  height: 100%;
  overflow: hidden;
  }
  #wrap{
  height: 50px;
  width: 50px;
  /* background-color: pink; */
  position: fixed;
  right: 15px;
  bottom: 15px;
  /* overflow: hidden; */
  }
  #wrap>.home{
  height: 49px;
  width: 49px;
  /* margin: auto; */
  background: url(img/home.png) ;
  background-position: center;
  border-radius: 50%;
  transition: 1s;
  position: absolute;
  z-index: 1;
  }
  #wrap>.nav{
  height: 100%;
  position: relative;
  }
  #wrap>.nav>img{
  position: absolute ;
  right: 0px;
  bottom: 0px;
  margin: 4px;
  border-radius: 50% ;
  }
  .home:hover{
  transform: rotate(360);
  }
 </style>
 </head>
 <body>
 <div id="wrap">
  <div class="home"></div>
  <div class="nav">
  <img src="img/clos.png" >
  <img src="img/full.png" >
  <img src="img/open.png" >
  <img src="img/prev.png" >
  <img src="img/refresh.png" >
  </div>
 </div>
 </body>
 <script type="text/javascript">
 window.onload =function(){
  var homeEle = document.querySelector("#wrap>.home");
  var flag= true;
  var imgs =document.querySelectorAll("#wrap>.nav>img");
  
  
  function fn(){
  this.style.transition=0.3+"s";
  this.style.transform ="rotate(-360deg) scale(1)";
  this.style.opacity =1;
  this.removeEventListener("transitionend",fn);
  }
  
  for (var i=0;i<imgs.length;i++) {
  imgs[i].onclick =function(){
   this.style.transform ="rotate(-360deg) scale(2)";
   this.style.transition ="0.3s";
   this.style.opacity =0.1;
   
   this.addEventListener("transitionend",fn);
  }
  }

  homeEle.onclick =function(){
  console.log(imgs.length);
  if(flag){
   this.style.transform="rotate(-720deg) ";
   imgs.forEach((index,No)=>{
   imgs[No].style.right = getLocation(140,No*22.5/180*Math.PI).left+"px";
   imgs[No].style.bottom = getLocation(140,No*22.5/180*Math.PI).top+"px";
   imgs[No].style.transform ="rotate(-360deg) scale(1)";
   imgs[No].style.transition ="1s "+No*0.1+"s";
   });
  }else{
   this.style.transform="rotate(0)";
   imgs.forEach((index,No)=>{
   imgs[No].style.right = 0+"px";
   imgs[No].style.bottom = 0+"px";
   imgs[No].style.transform ="rotate(0deg) scale(1)";
   imgs[No].style.transition="1s "+(0.4-No*0.1)+"s";
   });
  }
  flag =!flag;
  }
  
  var getLocation =function(r,deg){
  var x =Math.round(r*Math.sin(deg));
  var y =Math.round(r*Math.cos(deg));
  return{left:x,top:y};
  }
  
 }
 
 </script>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 深入理解javascript學(xué)習(xí)筆記（一） 編寫(xiě)高質(zhì)量代碼

    深入理解javascript學(xué)習(xí)筆記（一） 編寫(xiě)高質(zhì)量代碼

    編寫(xiě)高質(zhì)量JavaScript的一些要素，例如避免全局變量，使用單變量聲明，在循環(huán)中預(yù)緩存length(長(zhǎng)度)，遵循代碼閱讀，以及更多
    2012-08-08
  • JavaScript判斷數(shù)組類(lèi)型的方法

    JavaScript判斷數(shù)組類(lèi)型的方法

    這篇文章主要介紹了JavaScript判斷數(shù)組類(lèi)型的方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2019-10-10
  • 基于JS編寫(xiě)開(kāi)心消消樂(lè)游戲的示例代碼

    基于JS編寫(xiě)開(kāi)心消消樂(lè)游戲的示例代碼

    這篇文章主要為大家介紹了如何利用JavaScript實(shí)現(xiàn)開(kāi)心消消樂(lè)小游戲,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2022-06-06
  • js 動(dòng)態(tài)添加標(biāo)簽（新增一行，其實(shí)很簡(jiǎn)單，就是幾個(gè)函數(shù)的應(yīng)用）

    js 動(dòng)態(tài)添加標(biāo)簽（新增一行，其實(shí)很簡(jiǎn)單，就是幾個(gè)函數(shù)的應(yīng)用）

    把所有代碼拷下另存為一個(gè)html文件，在瀏覽器中打開(kāi)，點(diǎn)擊“新增一行”按鈕就可以,以下是對(duì)js函數(shù)的解釋
    2009-03-03
  • js獲取Html元素的實(shí)際寬度高度的方法

    js獲取Html元素的實(shí)際寬度高度的方法

    下面小編就為大家?guī)?lái)一篇js獲取Html元素的實(shí)際寬度高度的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-05-05
  • 使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能

    使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何使用iframe實(shí)現(xiàn)pdf文件預(yù)覽功能,以及iframe預(yù)覽報(bào)錯(cuò)問(wèn)題和iframe未能加載PDF文檔,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-09-09
  • JavaScript作用域示例詳解

    JavaScript作用域示例詳解

    作用域是JavaScript最重要的概念之一，想要學(xué)好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對(duì)JavaScript作用域示例詳解的介紹，非常不錯(cuò)，感興趣的朋友一起看下吧
    2016-07-07
  • 基于Bootstrap框架菜鳥(niǎo)入門(mén)教程(推薦)

    基于Bootstrap框架菜鳥(niǎo)入門(mén)教程(推薦)

    下面小編就為大家?guī)?lái)一篇基于Bootstrap框架菜鳥(niǎo)入門(mén)教程(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-09-09
  • JS中使用textPath實(shí)現(xiàn)線條上的文字

    JS中使用textPath實(shí)現(xiàn)線條上的文字

    最近項(xiàng)目經(jīng)理交給我一下新項(xiàng)目，要實(shí)現(xiàn)關(guān)系圖，需要在線條上繪制文字。下面小編把使用textPath實(shí)現(xiàn)線條上的文字功能分享到腳本之家平臺(tái)供大家參考
    2017-12-12
  • Ajax 加載數(shù)據(jù) 練習(xí)代碼

    Ajax 加載數(shù)據(jù) 練習(xí)代碼

    這篇文章主要介紹了Ajax 加載數(shù)據(jù)，主要是為了查詢(xún)表的顯示，不用嵌入php通過(guò)ajax調(diào)用，現(xiàn)在手機(jī)端的更多顯示功能都是通過(guò)ajax實(shí)現(xiàn)的
    2017-01-01

最新評(píng)論