html5 扇形导航效果图,js+css实现扇形导航效果
本文实例为大家分享了js+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);
}
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[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};
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html5 扇形导航效果图,js+css实现扇形导航效果相关推荐
- js+css+html实现放大镜效果
js+css+html实现放大镜效果 1 案例描述 2 编写HTML代码 3 编写CSS代码 4 编写JavaScript代码 5 总代码 1 案例描述 在很多网页中,我们都能看到一个类似于放大镜的效 ...
- html鼠标滑过导航条展开导航条,JS+CSS实现鼠标滑过时动态翻滚的导航条效果
本文实例讲述了JS+CSS实现鼠标滑过时动态翻滚的导航条效果.分享给大家供大家参考.具体如下: 这是一款鼠标悬停时动态翻滚的导航条,注意这里用了两个背景图,请等待网页加载完成或多刷新几次,这个是使用J ...
- html5行星环绕,Two.js实现星球环绕动画效果
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁.本文主要介绍了基于Two ...
- java 导航栏 可视化_一步步教大家编写酷炫的导航栏js+css实现
一步一步的学习制作导航栏,文章末尾再做个综合页面,分享给大家一个炫酷的导航栏供大家参考,具体内容如下 1.当前页面高亮显示的导航栏 首先是HTML代码,很简单,ul+li实现菜单 导航栏一 Andro ...
- html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
- js+css实现花瓣飘落效果
<div class="main pop-box"></div> css: @keyframes wind{0% {bottom: 100%;transfo ...
- 红包雨效果html,js+css实现红包雨效果
//每一个红包都是相对于父元素定位,通过z-index来设置层级 let zIndex = 1; function bindEvent() { $redPackage.on('click','.js- ...
- 小程序时间轴和地区列表的实现,js+css实现时间轴效果
老规矩先看效果图 先来看左图的地区列表是如何实现的. 我们在解析数据之前,要先看下数据结构 [{"_id": "XL28U3kPDdDCJ9m0"," ...
- html5雪花飘落,使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 .分享下: 复制代码 代码如下: function start(){ var array=new Array(); var canvas=document.g ...
最新文章
- Java后端Java面试题总结2021(春招+秋招+社招)
- java基础-static
- oracle数据库的详细安装,Oracle 11g数据库详细安装图文教程
- 视觉智能开放平台通过函数计算实现多人口罩佩戴识别
- 1QPushButton的使用,QLineEdit的使用,设置组件位置,布局(QHBoxLayout,QGridLayout)
- 看日本雅-miyavi演唱会
- centos linux 禁止ping
- linux版本信息i686,Linux下如何查看版本信息
- 温度控制直流电动机的c语言,温度控制直流电动机转速系统设计报告
- 疯狂Java讲义P179单例
- ajax 获取数据太慢,想写个加载中
- App变现之Admob原生广告
- lemon/cena C++ SPJ姿势
- [我也GitHub]我很焦虑, 我很暴躁!
- C6678信号处理板学习资料:基于6U VPX TMS320C6678+XC7K325T 的信号处理板
- 深度学习中数据的拆分打乱
- 关于ffmpeg内存管理函数av_malloc和av_free/av_freep
- 神雕侠侣手游服务器维护,神雕侠侣手游7月30日更新维护公告内容大全
- java播放swf文件_Java-如何在应用程序中嵌入并执行swf文件?
- python爬虫chinaplay网页的前十个游戏 游戏名字、原价、现价、折扣、爬下来输出到excel文件
热门文章
- 国产服务器Kylin(aarch64)安装mysql8.0.27
- VMware虚拟机安装windows8 时报错“Oxc000035a”解决办法
- c++并发编程实战 第一章
- Asp.Net Core WebApi 身份验证、注册、用户管理
- 深入理解MyBatis(七)—MyBatis事务
- float单精度浮点和double双精度浮点
- Keras Tuner模型自动超参数调优
- 入侵JVM?Java Agent原理浅析和实践(上)
- JavaFx+Mysql 实现学籍管理系统
- 排序算法——快速排序(图解+代码)