CSS3_扇形导航_transitionend 事件
扇形导航
圆形按钮,切换一系列图片导航的显示与隐藏。
如果涉及过渡动画,定位的 top 和 left 必须写
Math.sin(弧度)
- 一圈弧度 = 2π,一圈角度 = 360
- 弧度 = (deg*2π)/360 = (deg*π)/180
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>扇形导航</title> <style type="text/css">
body {
width: 100%;
color: #000;
background: #96b377;
font: 14px Helvetica, Arial, sans-serif;
} /**** Corner Nav ****/
#corner_nav {
position: fixed;
bottom: 0px;
right: 0px; width: 50px;
height: 50px;
padding: 1px 0 0 1px; background: #f000;
} #corner_btn {
position: absolute;
top: 1px;
left: 1px;
z-index: 5; width: 49px;
height: 49px;
border-radius: 50%;
background: url(./img/corner.png) no-repeat;
transition: 1s all ease 0s;
cursor: pointer;
} #a_imgs {
list-style: none;
width: 42px;
height: 42px;
} #a_imgs img {
display: block;
border-radius: 50%; transition: 1s all ease 0s;
opacity: 0.6;
} #a_imgs li {
position: absolute;
top: 4px;
left: 4px; }
</style>
</head> <body> <div id="corner_nav"> <div id="corner_btn"></div> <ul id="a_imgs">
<li class="aImgLi"><a href="javescript:;"><img src="./img/clos.png" /></a></li>
<li class="aImgLi"><a href="javescript:;"><img src="./img/full.png" /></a></li>
<li class="aImgLi"><a href="javescript:;"><img src="./img/open.png" /></a></li>
<li class="aImgLi"><a href="javescript:;"><img src="./img/prev.png" /></a></li>
<li class="aImgLi"><a href="javescript:;"><img src="./img/refresh.png" /></a></li>
</ul> </div> <!-- javascript 代码 -->
<script type="text/javascript"> var cornerBtn = document.getElementById("corner_btn"); var lis = document.querySelectorAll("li.aImgLi");
var navLength = 200; var isOpen = false;
cornerBtn.onclick = function(){
if(isOpen){
// 收回
cornerBtn.style.transform = "rotate(0deg)"; for(i=0; i<lis.length; i++){
lis[i].style.transition = 0.5+"s "+0.1*(lis.length-1-i)+"s"; lis[i].style.left = 4+"px";
lis[i].style.top = 4 +"px"; lis[i].style.transform = "rotate(0deg)";
}
}else{
// 释放
cornerBtn.style.transform = "rotate(-360deg)"; var i = 0;
for(i=0; i<lis.length; i++){
lis[i].style.transition = 0.5+"s "+0.1*i+"s"; lis[i].style.left = -navLength*Math.sin( (90/(lis.length-1))*i*Math.PI/180 )+"px";
lis[i].style.top = -navLength*Math.cos( (90/(lis.length-1))*i*Math.PI/180 )+"px"; lis[i].style.transform = "rotate(-720deg)";
}; };
isOpen = !isOpen;
}; // 点击按钮: 按钮放大,透明度为 1
var aImgs = document.getElementById("a_imgs");
aImgs.onclick = function(e){
e = e || window.event;
var obj = e.target || e.srcElement; // 单独设置点击元素的样式: 透明度 放大
if(obj.nodeName == "IMG"){
obj.style.opacity = "1";
obj.style.transform = "scale(1.5)"; // 在过渡结束和,缩小到原来大小
// window.setTimeout(function(){
// obj.style.transform = "scale(1)";
// },1000); /**** transitionend 检测事件结束事件
必须是 DOM2 级事件绑定 ****/
/**** 1. 兼容性问题****/
obj.addEventListener('transitionend', styleBack);
obj.addEventListener('webkitTransitionEnd', styleBack); // 小驼峰命名法 function styleBack(){
obj.style.transform = "scale(1)"; /**** 2. 解绑问题 PC 端流量不限量,无大影响
移动端必须解绑 省流量
因为事件存在,需要一定流量监控此事件,
且无关触发需要消耗流量执行 ****/
obj.removeEventListener('transitionend', styleBack);
obj.removeEventListener('webkitTransitionEnd', styleBack); // 小驼峰命名法
}; };
}; // 鼠标离开,所有元素回到默认样式
aImgs.onmouseleave = function(){
var allImgs = document.getElementById("a_imgs").children;
var i = 0;
var theImg = null;
for(i=0; i<allImgs.length; i++){
theImg = allImgs[i].getElementsByTagName("img")[0];
theImg.style.opacity = "0.6";
};
}; </script>
</body>
</html>
CSS3_扇形导航_transitionend 事件的更多相关文章
- 扇形导航 css3
本篇文章将通过对css3中的2d变化以及过渡进行分析设计 先放上最终效果图 功能实现:1.给扇形home元素设置点击事件并添加2d旋转 2.给导航栏设置2d旋转 并通过 ...
- 原生js实现扇形导航以及动画的坑
第一次发博客,有点紧张.首先来一张效果图. 主要是实现了点击右下角的风扇按钮实现了: 导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画. 上源码: <!D ...
- JavaScript----分层导航 滚动事件
分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- 简单二级导航JQ事件代码
$(function()){ $("li").hover(function(){ $(this).children("dl").show() },functio ...
- jQuery导航切换功能
Css ------------------------------------------------------------------------------------------------ ...
- Android导航栏ActionBar的具体分析
尊重原创:http://blog.csdn.net/yuanzeyao/article/details/39378825 关于ActionBar,相信大家并不陌生,可是真正能够熟练使用的也不是许多,这 ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- 背水一战 Windows 10 (41) - 控件(导航类): Frame
[源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 示例Controls ...
- WP8.1学习系列(第十九章)——事件和路由事件概述
我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...
随机推荐
- kubernetes云平台管理实战: pod资源共享(三)
一.共享容器IP地址 1.查看容器进程 [root@k8s-node1 ~]# docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS ...
- 深入学习CSS外边距margin(重叠效果,margin传递效果,margin:auto实现块级元素水平垂直居中效果)
前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...
- 利用git提交代码
一.首先需要下载git 查看电脑是否安装git,打开终端,输入git,回车如果输出如下,则代表已安装了git 如果未安装,则会输出: 按照提示输入:sudo apt-get install git即可 ...
- Consequence of Point-by-Point Bounds
设 $X$ 是完备距离空间, $\scrF$ 是 $X$ 上的实连续函数族且具有性质: 对于每一 $x\in X$, 存在常数 $M_x>0$, 使得对于每一 $F\in\scrF$, $$\b ...
- .net 委托多线程 实时更新界面
Thread thread = new Thread(() => { button2.Invoke(new EventHandler(delegate { button2.Enabled = t ...
- linux tomcat单机部署多应用
1.修改/etc/profile 增加tomcat环境变量
- Docker镜像保存save、加载load(外网转移至内网)
(1)查看要要保存的镜像的ID [root@localhost docker]# docker images (2)保存镜像 [root@localhost docker]# docker save ...
- js的事件冒泡,事件捕获
addEventListener() 方法可以指定 "useCapture" 参数来设置传递事件类型:false→冒泡 true→捕获 默认false. ...
- centos7中设置nginx的systemctl启动方式
1.建立服务文件 (1)文件路径 vim /usr/lib/systemd/system/nginx.service (2)服务文件内容 [Unit] Description=nginx - high ...
- npm安装less和less-loadernpm或者stylus和stylus-loader
vue-cli 构建的项目默认是不支持 less 的,需要自己添加. 首选,安装 less 和 less-loader ,在项目目录下运行如下命令 npm install less less-load ...