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 相关文章推荐
传统HTML页面实现模块化加载的方法
Oct 15 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 HTML / CSS
使用html5 canvas 画时钟代码实例分享
Nov 11 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
血轮眼轮回眼特效 html+css
Mar 31 HTML / CSS
纯CSS3实现div按照顺序出入效果
Jul 15 HTML / CSS
CSS布局之浮动(float)和定位(position)属性的区别
Sep 25 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
PHP 表单提交给自己
2008/07/24 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
twig里使用js变量的方法
2016/02/05 PHP
PHP crypt()函数的用法讲解
2019/02/15 PHP
Laravel访问出错提示:`Warning: require(/vendor/autoload.php): failed to open stream: No such file or di解决方法
2019/04/02 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Jquery 实现图片轮换
2015/01/28 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
turn.js异步加载实现翻书效果
2019/07/25 Javascript
JavaScript中的各种宽高属性的实现
2020/05/08 Javascript
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
python:print格式化输出到文件的实例
2018/05/14 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Python中生成ndarray实例讲解
2021/02/22 Python
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
企业办公室岗位职责
2014/03/12 职场文书
西安导游词
2015/02/12 职场文书
2015年营业员工作总结
2015/04/23 职场文书
义卖募捐活动总结
2015/05/09 职场文书
投诉书格式范本
2015/07/02 职场文书
军训通讯稿范文
2015/07/18 职场文书
自荐信范文
2019/05/20 职场文书