js+css实现扇形导航效果


Posted in Javascript onAugust 18, 2020

本文实例为大家分享了js+css实现扇形导航效果的具体代码,供大家参考,具体内容如下\

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>扇形导航</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>

js+css实现扇形导航效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 Javascript
jQuery解析XML文件同时动态增加js文件的方法
Jun 01 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
微信小程序中单位rpx和rem的使用
Dec 06 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
Aug 22 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
Thinkjs3新手入门之如何使用静态资源目录
Dec 06 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
js实现3D旋转效果
Aug 18 #Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 #Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 #Javascript
javascript实现移动端上传图片功能
Aug 18 #Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 #Javascript
小程序实现上传视频功能
Aug 18 #Javascript
如何在selenium中使用js实现定位
Aug 18 #Javascript
You might like
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
限制复选框的最大可选数
2006/07/01 Javascript
纯Javascript实现Windows 8 Metro风格实现
2013/10/15 Javascript
jquery获得option的值和对option进行操作
2013/12/13 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
JavaScript中var、let、const区别浅析
2018/06/24 Javascript
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
使用Typescript开发微信小程序的步骤详解
2021/01/12 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python计算方程式根的方法
2015/05/07 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
python实现屏保计时器的示例代码
2018/08/08 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python flask中动态URL规则详解
2019/11/22 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
python3+opencv 使用灰度直方图来判断图片的亮暗操作
2020/06/02 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
联想新加坡官方网站:Lenovo Singapore
2017/10/24 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
感恩节活动方案
2014/01/27 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
企业安全生产责任书范本
2014/07/28 职场文书
红与黑读书笔记
2015/06/29 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
MySQL优化常用的19种有效方法(推荐!)
2022/03/17 MySQL