css3运用transform形■变融合恶性事件进行扇形导航

2021-03-24 10:24 jianzhan

这一实例由于写不对一个transition的英语单词,害得我花了一个中午的時间,确实双眼都瞎了,之后不必再犯这类低等不正确  >_<

一、专业知识点剖析

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);
		//回到2个值的情况下,用目标的方法。
		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);
		//回到2个值的情况下,用目标的方法。
		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 扇形导航栏的材料请关心脚本制作之家其他有关文章内容!