js+css实现扇形导航效果
本文实例为大家分享了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实现分页导航效果
前言 最近的项目需要添加一个分页导航的功能,没有用网上封装好的文件.通过JS自己简单实现了效果.下面和大家分享一下. 内容 下图为首次加载后的效果,默认显示5页, 当点击下一页时将选中页面的页码置于中间 下面让我们来看看实现的代码 第一部分是在页面显示内容的处理 function SetListPage() { $.ajax({ type: "GET", url: "ajax/PhoneList.ashx?", datatype: 'json', success:
-
JS 实现导航栏悬停效果
JS-实现导航栏悬停 先布个局: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <met
-
JS实现导航栏楼层特效
本文实例为大家分享了JS实现导航栏楼层的具体代码,供大家参考,具体内容如下 知识点 1.多个事件有冲突的时候,需要设置flag判断是什么事件,进而进行后续操作. 2.楼层效果就是判断scrollTop和offsetTop的关系 3.引入工具库工具库 运行效果 导航与界面实现互动 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
-
JS实现选中当前菜单后高亮显示的导航条效果
本文实例讲述了JS实现选中当前菜单后高亮显示的导航条效果.分享给大家供大家参考.具体如下: 这里演示选中当前菜单后,该菜单高亮显示,也就是说在不改变菜单CSS代码的情况下,用JavaScript去控制菜单的背景,如果该菜单项被点击后,将赋予它一个与众不同的背景颜色或背景图像,这样可以清淅的指引用户下在浏览的网站栏目,本菜单不需要动态语言的加入,简单方便而且效果好. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cho-nav-gl-sho
-
js实现无限级树形导航列表效果代码
本文实例讲述了js实现无限级树形导航列表效果代码.分享给大家供大家参考.具体如下: 这是一款js实现无限级树形下拉导航菜单,简洁实用,用到一个已封装好的JS类,有用的大家借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-unlimit-tree-style-nav-list-codes/ 具体代码如下: <meta http-equiv="Content-Type" content="text/html;
-
一个js控制的导航菜单实例代码
这种菜单效果是通过脚本和样式控制的,对于新手来说是非常好的学习内容: 这种昨晚一边看舞动奇迹,一边整理这个菜单的小代码,一起来看看吧,会了可以温故知新,不会的可以借鉴一下思想,其实就是想完善一下这种前端的思想,让它不要再陌生: 这是一个asp.net的master页面里面的菜单部分 Html部分: 复制代码 代码如下: <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPa
-
JS中用三种方式实现导航菜单中的二级下拉菜单
我们在淘宝.搜狐等大型网站上都可以看到使用的一些二级下拉菜单,比如下面这张图片.那么如何实现导航菜单栏中的二级下拉菜单?下面小编给大家分享实现思路. 但是如何实现类似的图片呢?实际上,我们有至少三种方式来实现,下面,我附上代码供大家参考. 1.仅使用html和css <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding: 0;list-style
-
CSS3+Js实现响应式导航条
今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c
-
JS实现滑动导航效果
本文实例为大家分享了JS实现滑动导航效果的具体代码,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
JS实现音乐导航特效
本文实例为大家分享了JS实现音乐导航特效的具体代码,供大家参考,具体内容如下 知识点 1.audio.play() 播放音频 2.audio.currentTime = 0 从头开始播放 3.引入工具库工具库 运行效果< 鼠标进入后,播放音频 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></ti