资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css3如何利用transform变形结合事件完成扇形导航-创新互联

这篇文章给大家分享的是有关css3如何利用transform变形结合事件完成扇形导航的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专注于企业营销型网站建设、网站重做改版、克东网站定制设计、自适应品牌网站建设、H5技术、购物商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为克东等各大城市提供网站开发制作服务。

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

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

一、知识点分析

1、APDiv定位布局

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

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

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

二、HTML源代码


   
       
       
       
       
       
  
    

三、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
完整页面代码




环形导航






        
    



感谢各位的阅读！关于“css3如何利用transform变形结合事件完成扇形导航”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
            

            网站标题：css3如何利用transform变形结合事件完成扇形导航-创新互联            

            文章源于：http://www.cdkjz.cn/article/dosdhe.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    网络推广公司成都全屋定制网络推广平台网络营销兴久牧业成都联通服务器托管网站设计天泽尚品电信成都枢纽中心乐山电信机房                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图