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 相关文章推荐
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
juqery 学习之三 选择器 简单 内容
Nov 25 Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
Mar 31 Javascript
Node.js应用设置安全的沙箱环境
Apr 23 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
Vuex 在Vue 组件中获得Vuex 状态state的方法
Aug 27 Javascript
详解Vue用cmd创建项目
Feb 12 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
PHP基础之输出缓冲区基本概念、原理分析
2019/06/19 PHP
记Laravel调用Gin接口调用formData上传文件的实现方法
2019/12/12 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
Javascript入门学习资料收集整理篇
2008/07/06 Javascript
js的闭包的一个示例说明
2008/11/18 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
Javascript的表单验证-初识正则表达式
2016/03/18 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Vue this.$router.push(参数)实现页面跳转操作
2020/09/09 Javascript
使用Python脚本将Bing的每日图片作为桌面的教程
2015/05/04 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
python中强大的format函数实例详解
2018/12/05 Python
Django logging配置及使用详解
2019/07/23 Python
Python气泡提示与标签的实现
2020/04/01 Python
canvas像素画板的实现代码
2018/11/21 HTML / CSS
C#软件工程师英语面试题
2015/06/07 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
五一家具促销方案
2014/01/10 职场文书
知识竞赛活动方案
2014/02/18 职场文书
计生工作先进事迹
2014/08/15 职场文书
夏洛特的网观后感
2015/06/15 职场文书
2015年征兵工作总结
2015/07/23 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书