这个案例因为写错了一个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 ea-in-out;}#home img {width: 100%;}四、javascript源代码
window.onload=function(){var ohome=document.getelementbyid("home");var onav=document.getelementbyid("nav");v作文 推荐一个好地方 ar 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.transiti别有幽愁暗恨生下一句on="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.opac告诫的近义词ity=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 ea-in-out "+100*i+"ms";aimg[i].style.transform="scale(1) rotate(720deg)";}}el{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 ea-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,fal);}function removeend(obj,fn){obj.removeeventlistener("transitionend",fn,fal);}完整页面代码
<!doctype html><html><head><meta chart="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 ea-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 ea-in-out "+100*i+"ms";aimg[i].style.transform="scale(1) rotate(720deg)";}}el{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 ea-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,fal);}function removeend(obj,fn){obj.removeeventlistener("transitionend",fn,fal);}</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 扇形导航的资料请关注www.887551.com其它相关文章！
本文发布于:2023-04-03 20:54:29，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/b56af8385a10f776974c928b1c951848.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：css3利用transform变形结合事件完成扇形导航.doc
本文 PDF 下载地址：css3利用transform变形结合事件完成扇形导航.pdf
| 留言与评论（共有 0 条评论） |
