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的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
深入理解css中vertical-align属性
Apr 18 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
Dec 04 HTML / CSS
HTML页面中添加Canvas标签示例
Jan 01 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
浅谈由position属性引申的css进阶讨论
May 25 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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中输出转义JavaScript代码的实现代码
2011/04/22 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
PHP常用正则表达式集锦
2014/08/17 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP实现的方程求解示例分析
2016/11/11 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
分享JS数组求和与求最大值的方法
2016/08/11 Javascript
浅谈js中的bind
2019/03/18 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python实现矩阵相乘的三种方法小结
2018/07/26 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
Python实现的栈、队列、文件目录遍历操作示例
2019/05/06 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
python 中Arduino串口传输数据到电脑并保存至excel表格
2019/10/14 Python
解决Tensorflow占用GPU显存问题
2020/02/03 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
openCV提取图像中的矩形区域
2020/07/21 Python
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
2017/01/12 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
司法局火灾防控方案
2014/06/05 职场文书
自主招生专家推荐信
2015/03/26 职场文书
安全生产学习心得体会
2016/01/18 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书