基于jQuery插件实现环形图标菜单旋转切换特效
feature.presenter.1.5.css
body{
margin:0;
font-family:Tahoma;
}
.feature-presenter{
position:absolute;
}
.feature-presenter-icon{
background-color:white;
text-align:center;
transition:transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
-webkit-transition:-webkit-transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
border-radius:50%;
cursor:pointer;
}
.feature-presenterimg{
max-width:100%;
transition:transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
-webkit-transition:-webkit-transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
border-radius:50%;
cursor:pointer;
box-shadow:0016pxrgba(0,0,0,0.1);
filter:blur(0px);
-webkit-filter:blur(0px);
image-rendering:-webkit-optimize-contrast;
}
.feature-presenteri{
font-size:85px;
/*filter:url('data:image/svg+xml;utf8,<svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filterid="gaussian_blur"><feGaussianBlurin="SourceGraphic"stdDeviation="0"/></filter></defs></svg>#gaussian_blur');*/
}
.feature-presenter-circle-container{
border-radius:50%;
display:inline-block;
border:1pxsolidrgba(0,0,0,0.09);
box-shadow:0px0px4pxrgba(0,0,0,0.09);
transition:transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
-webkit-transition:-webkit-transform0.7scubic-bezier(0.445,0.05,0.55,0.95);
background-color:white;
}
.feature-presenter-text-container{
line-height:1.3;
display:inline-block;
vertical-align:top;
z-index:1001;
position:relative;
overflow:hidden;
}
.feature-presenter-text-heading{
-webkit-transition:-webkit-transform0.4scubic-bezier(0.075,0.82,0.165,1);
transition:transform0.4scubic-bezier(0.075,0.82,0.165,1);
margin-bottom:10px;
color:rgba(0,0,0,0.8);
}
.feature-presenter-text-description{
-webkit-transition:-webkit-transform0.4scubic-bezier(0.075,0.82,0.165,1)0.4s;
transition:transform0.4scubic-bezier(0.075,0.82,0.165,1)0.4s;
color:rgba(0,0,0,0.5);
}
.feature-presenter-text-container-out{
-webkit-transform:translate(200%,0);
transform:translate(200%,0);
-webkit-transition:-webkit-transform0.5sease-in;
transition:transform0.5sease-in;
}
html:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>基于jQuery环形图标菜单旋转切换特效</title>
<linkhref='css/feature.presenter.1.5.css'rel='stylesheet'type='text/css'>
<scripttype="text/javascript"src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<divid="test-element"></div>
<scriptsrc="js/feature.presenter.1.5.min.js"></script>
<script>
/*图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML*/
varsettings=[{image:'images/zzsc1.png',heading:'毛票票',description:'www.nhooo.com'},
{image:'images/zzsc2.png',heading:'毛票票',description:'www.nhooo.com'},
{image:'images/zzsc3.png',heading:'毛票票',description:'www.nhooo.com'},
{image:'images/zzsc4.png',heading:'毛票票',description:'www.nhooo.com'},
{image:'images/zzsc5.png',heading:'毛票票',description:'www.nhooo.com'},
{image:'images/zzsc6.png',heading:'毛票票',description:'www.nhooo.com'}
];
varoptions={
circle_radius:220,
normal_feature_size:100,
highlighted_feature_size:150,
top_margin:100,
bottom_margin:50,
spacing:40,
min_padding:50,
heading_font_size:30,
description_font_size:20,
type:'image'
};
varfp=newFeaturePresenter($("#test-element"),settings,options);
fp.createPresenter();
</script>
</body>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。