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

三、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://shouzuofang.com/article/dosdhe.html
        
    
    

        
其他资讯
        

            

                    企业的网络品牌推广要怎么做
                

                    关键词排名分析有何作用，这三大作用不容忽视
                

                    企业网站为什么要做关键词排名优化
                

                    怎么提高网站优化需求？四个步骤促进网站需求优化
                

                    网站排名优化中网站标题的书写技巧