css3利用transform变形结合事件完成扇形导航


Posted in HTML / CSS onOctober 26, 2020

这个案例因为写错了一个transition的单词,害得我花了一个下午的时间,真的眼睛都瞎了,以后不要再犯这种低级错误  >_<

css3利用transform变形结合事件完成扇形导航

一、知识点分析

1、APDiv定位布局

2、点击事件下的transition和transform的效果。

3、每个小图标的left和top值的计算。

4、点击小图标后图标的transition事件侦听。

二、HTML源代码

<div id="stage">
  <div id="nav"> 
      <img src="images/1.png"> 
      <img src="images/2.png"> 
      <img src="images/3.png"> 
      <img src="images/4.png"> 
      <img src="images/5.png"> 
  </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>

三、CSS样式

body {
	margin: 0;
}
body{
	background-color:#eee;}
#stage {
	width: 300px;
	height: 300px;
	position: relative;
	top: 150px;
	margin: 0 auto;
}
#nav {
	position: absolute;
	width: 120px;
	height: 107px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -53px;
}
#nav img {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}
#home {
	position: absolute;
	width: 150px;
	height: 134px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: 0.5s ease-in-out;
	
}
#home img {
	width: 100%;
}

四、JavaScript源代码

window.onload=function(){
	var oHome=document.getElementById("home");
	var oNav=document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var onOff=true;
	var iR=-260;
	
	//鼠标点击每个小图标的时候
	for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //每点击一个小图片,添加一个事件侦听。当事件结束的时候,执行end函数。
			}
		}
	//事件结束的时候,执行end函数,恢复默认值,移除事件侦听。
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//点击home图标的时候,第一次顺时针,第二次逆时针旋转。
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//设置每个图片的left和top值。
			for(var i=0;i<imgLen;i++){
				//有30度的起始角度。
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				//每个图片有100ms的延迟。
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//图片倒序收回。每个图片有100ms的延迟。
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//获得img图片的left和top值。勾股定理,已知夹角和斜边,获取对边的长度:sin(弧度)*斜边。侧边的长度:cos(弧度)*斜边。弧度=角度/180*派。
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//返回两个值的时候,用对象的方式。
		return{
			"l":ileft,
			"t":iTop
			}
		}
	//添加end和移除end函数。对transition事件做监听。
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}

完整页面代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>环形导航</title>
<style>
body {
	margin: 0;
}
body{
	background-color:#eee;}
#stage {
	width: 300px;
	height: 300px;
	position: relative;
	top: 150px;
	margin: 0 auto;
}
#nav {
	position: absolute;
	width: 120px;
	height: 107px;
	left: 50%;
	margin-left: -60px;
	top: 50%;
	margin-top: -53px;
}
#nav img {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	cursor: pointer;
}
#home {
	position: absolute;
	width: 150px;
	height: 134px;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	transition: 0.5s ease-in-out;
	
}
#home img {
	width: 100%;
}
</style>
<script>
window.onload=function(){
	var oHome=document.getElementById("home");
	var oNav=document.getElementById("nav");
	var aImg=oNav.getElementsByTagName("img");
	var imgLen=aImg.length;
	var onOff=true;
	var iR=-260;
	
	//鼠标点击每个小图标的时候
	for(var i=0;i<imgLen;i++){
		aImg[i].onclick=function(){
			this.style.transition="0.2s";
			this.style.transform="scale(1.2) rotate(720deg)";
			this.style.opacity=0.1;
			addEnd(this,end); //每点击一个小图片,添加一个事件侦听。当事件结束的时候,执行end函数。
			}
		}
	//事件结束的时候,执行end函数,恢复默认值,移除事件侦听。
	function end(){
		this.style.transition="0.1s";
		this.style.transform="scale(1) rotate(720deg)";
		this.style.opacity=1;
		removeEnd(this,end); 
		}
	
	//点击home图标的时候,第一次顺时针,第二次逆时针旋转。
	oHome.onclick=function(){
		if(onOff)
		{
			this.style.transform="rotate(360deg)";
			//设置每个图片的left和top值。
			for(var i=0;i<imgLen;i++){
				//有30度的起始角度。
				var oLt=getLeftTop(iR,120/(imgLen-1)*i+30);
				aImg[i].style.left=oLt.l+"px";
				aImg[i].style.top=oLt.t+"px";
				//每个图片有100ms的延迟。
				aImg[i].style.transition="0.5s ease-in-out "+100*i+"ms";
				aImg[i].style.transform="scale(1) rotate(720deg)";
				}
			
			}
		else
		{
			this.style.transform="rotate(0deg)";
			for(var i=0;i<imgLen;i++){
				aImg[i].style.left=0+"px";
				aImg[i].style.top=0+"px";
				//图片倒序收回。每个图片有100ms的延迟。
				aImg[i].style.transition="0.5s ease-in-out "+100*(imgLen-i-1)+"ms";
				
				aImg[i].style.transform="scale(1) rotate(0deg)";
				}
			}
		onOff=!onOff;
		
	}
	
}	
	
	
	//获得img图片的left和top值。勾股定理,已知夹角和斜边,获取对边的长度:sin(弧度)*斜边。侧边的长度:cos(弧度)*斜边。弧度=角度/180*派。
	function getLeftTop(iR,iDeg){
		var ileft=Math.round(Math.sin(iDeg/180*Math.PI)*iR);
		var iTop=Math.round(Math.cos(iDeg/180*Math.PI)*iR);
		//返回两个值的时候,用对象的方式。
		return{
			"l":ileft,
			"t":iTop
			}
		}
	//添加end和移除end函数。对transition事件做监听。
	function addEnd(obj,fn){
		obj.addEventListener("transitionend",fn,false);
		}
	function removeEnd(obj,fn){
		obj.removeEventListener("transitionend",fn,false);
		}
	

</script>
</head>

<body>
<div id="stage">
  <div id="nav"> <img src="images/1.png"> <img src="images/2.png"> <img src="images/3.png"> <img src="images/4.png"> <img src="images/5.png"> </div>
  <div id="home"> <img src="images/home.png"> </div>
</div>
</body>
</html>

以上就是css3利用transform变形结合事件完成扇形导航的详细内容,更多关于css3 扇形导航的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
使用CSS3的rem属性制作响应式页面布局的要点解析
May 24 HTML / CSS
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
Apr 26 HTML / CSS
移动端Web页面的CSS3 flex布局快速上手指南
May 31 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
利用三角函数在canvas上画虚线的方法
Jan 11 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
CSS 3.0文字悬停跳动特效代码
Oct 26 #HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 #HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
Oct 21 #HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 #HTML / CSS
详解CSS3中常用的样式【基本文本和字体样式】
Oct 20 #HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 #HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
Oct 16 #HTML / CSS
You might like
PHP反射使用实例和PHP反射API的中文说明
2014/07/02 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php计算函数执行时间的方法
2015/03/20 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
键盘KeyCode值列表汇总
2013/11/26 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
js轮播图无缝滚动效果
2017/06/17 Javascript
react-native动态切换tab组件的方法
2018/07/07 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
在Python的Django框架下使用django-tagging的教程
2015/05/30 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python网络编程中urllib2模块的用法总结
2016/07/12 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python 链接sqlserver 写接口实例
2020/03/11 Python
Python 中的函数装饰器和闭包详解
2021/02/06 Python
某公司面试题
2012/03/05 面试题
编程输出如下图形
2013/11/24 面试题
高一英语教学反思
2016/03/03 职场文书
创业计划书之暑假培训班
2019/11/09 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL