java 扇形_扇形导航 css3
本篇文章将通过对css3中的2d变化以及过渡进行分析设计
先放上最终效果图
功能实现:1.给扇形home元素设置点击事件并添加2d旋转
2.给导航栏设置2d旋转 并通过三角函数计算出各个导航位置
3.设置导航单击事件 并添加过渡结束事件transitonend 完成点击放大并恢复的动画
注 意:transitonend事件需要及时移除 假如没有内部自杀
则这个事件一直伴随着点击时间存在 则会导致其进行其他过渡时仍会触发
导致下图变化
在过渡结束后存在多余操作
正确示意应是
内容清晰 无多余操作
css部分代码
*{
padding: 0;
margin: 0;
}
body,html{
height: 100%;
overflow: hidden;
}
#wrap{
position: absolute;
bottom: 8px;
right: 8px;
width:50px ;
height: 50px;
/* background: pink; */
}
#wrap > #content>img{
position: absolute;
left: 0;
top: 0;
margin: 4px;
border-radius:50% ;
}
#wrap > #content{
height: 100%;
}
#wrap > #home{
/* margin-top: 100px; */
position: absolute;
z-index: 1;
/* height: 50px */
background: url(img/home.png) no-repeat;
width: 100%;
height: 100%;
border-radius:50% ;
top: 0;
left: 0;
transition: 1s;
}
/* #wrap > #home:hover{
transform: rotate(720deg);
}
*/
html代码如下
JavaScript代码如下
window.οnlοad=function(){
var c=130;
var home=document.getElementById("home");
var imgs=document.querySelectorAll("#wrap > #content > img");
var flag=true; home.onclick = function(){
function fun(){
this.style.transition=".1s";
this.style.transform="rotate(-720deg) scale(1) ";
this.style.opacity="1";
this.removeEventListener("transitionend",fun);
}
//给所有的img绑定点击属性 需要遍历
for(i=0;i
imgs[i].addEventListener("click",function(){
this.style.transform="rotate(-720deg) scale(1.5) ";
this.style.transition=".4s";
this.style.opacity="0.1";
this.addEventListener("transitionend",fun);
});
//在运行结束后希望能触发一个新的事件 并移除它
//imgs[i].addEventListener("transitionend",fun);
}
if(flag){
this.style.transform= "rotate(-720deg)";
for(i=0;i
//因为是逐个出现 所以要算不同的过渡延迟 还要有空格进行区分两个属性
imgs[i].style.transition=".5s "+(i*0.1)+"s ";
//因为有旋转
imgs[i].style.transform=" rotate(-720deg) scale(1)";
imgs[i].style.left = -getpoint(c,90*i/(imgs.length-1)).left+"px";
imgs[i].style.top = -getpoint(c,90*i/(imgs.length-1)).top+"px";
}
}else{
for(i=0;i
imgs[i].style.transition=".5s "+((imgs.length-1-i)*0.1)+"s ";
imgs[i].style.transform=" rotate(0) scale(1)";
imgs[i].style.left = "0px";
imgs[i].style.top = "0px";
}
this.style.transform= "rotate(0deg)";
}
flag=!flag;
}
}
//已知一条边和一个角 求它的x y
function getpoint(c,deg){ //角度转弧度公式 三角函数
var left=Math.round(c*Math.sin(deg*Math.PI/180));
var top=Math.round(c*Math.cos(deg*Math.PI/180));
return {
left:left,
top:top
}
}
java 扇形_扇形导航 css3相关推荐
- Java学习-14 CSS与CSS3美化页面及网页布局
Java学习-14 CSS与CSS3美化页面及网页布局 1. CSS简介 什么是CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示控制 HTML 元素, ...
- JAVA入门_多线程_邮局派发信件
JAVA入门_多线程_邮局派发信件 Postman package cn.campsg.java.experiment.entity;public class Postman {private Str ...
- 第一段Java程序_借助Win控制命令台编译执行 编辑器Notepad++
第一段Java程序_借助Win控制命令台编译执行 编辑器Notepad++ 准备代码: 第一次编译: 显然需要先配置环境变量: 先找到java.exe和javac.exe所在的文件夹位置: 此电脑-& ...
- java 多线程写缓存,Java多线程_缓存对齐
1.什么是缓存对齐 当前的电脑中,数据存储在磁盘上,可以断电保存,但是读取效率较低.不断电的情况下,数据可以在内存中存储,相对硬盘效率差不多是磁盘的一万倍左右.但是运算时,速度最快的是直接缓存在CPU ...
- 复习Java异常处理_异常分类_自定义异常_线程初步了解
复习Java异常处理_异常分类_自定义异常_线程 主要内容 异常.线程 教学目标 第一章 异常 1.1 异常概念 异常,就是不正常的意思.在生活中:医生说,你的身体某个部位有异常,该部位和正常相比有点 ...
- java项目_第171期ssm房屋租赁系统_计算机毕业设计
java项目_第171期ssm房屋租赁系统_计算机毕业设计 [源码请到下载专栏下载] 今天分享的项目是<ssm房屋租赁系统> 该项目分为2个角色,管理员和用户. 用户可以浏览前台,查看房屋 ...
- java项目-第155期ssm班级同学录网站-java毕业设计_计算机毕业设计
java项目-第155期ssm班级同学录网站-java毕业设计_计算机毕业设计 [源码请到资源专栏下载] 今天分享的项目是<ssm班级同学录网站> 该项目分为2个角色,管理员.用户. 用户 ...
- JAVA入门_继承与重载_饲养员喂养动物
JAVA入门_继承与重载_饲养员喂养动物 实验要求 Tiger类 Feeder类 MainClass 运行结果 实验要求 本实验要求:本实验以饲养员喂养老虎为业务背景,体验"函数重载&quo ...
- java数组的下界,Java泛型_上界extends_下界super
Java泛型_上界extends_下界super ? 通配符类型 extends T> 表示类型的上界,表示参数化类型的可能是T或是T的子类 super T> 表示类型下界(Java C ...
最新文章
- 机器学习误差分析(Error Analysis)实战
- 暮色森林模组_我的世界暮色森林mod全攻略,尤其是Boss击杀顺序,一定要牢记...
- jdbc preparestatement 执行多条语句_第二十一天JDBC编程
- 解题报告——Python编程:从入门到实践_动手试一试_参考答案(第四章)
- gitlab bash_如何编写Bash一线式以克隆和管理GitHub和GitLab存储库
- HTML5超链接和多媒体,IT兄弟连 HTML5教程 多媒体应用 创建图像和链接
- 信息学奥赛一本通 1939:【07NOIP普及组】纪念品分组 | P1094 [NOIP2007 普及组] 纪念品分组
- Python类私有方法的陷阱
- ThreadLocal类的实现用法
- matlab 模拟滤波器转换为数字滤波器,一种模拟滤波电路数字化方法
- 异步FIFO中空满信号如何产生?
- 【细节处理】LeetCode 66. Plus One
- 酷Q移植先驱的记录流程,QQ机器人框架插件
- CSND博客☞盘码之路开始
- 如何使用Imperva Incapsula优化和加速您的网站
- leetcode (Arranging Coins)
- zpl指令打印中文内容_大疆机甲大师Python开发: 中文命名变量初尝试
- Cocos2d-x 2.0 百例精讲:如何让一个精灵跟随触点移动
- 申论中关于人物“精神”、“品质”的总结
- 芝诺悖论:一个跑得最快的人永远追不上跑得最慢的人