Dieses Mal stelle ich Ihnen die Funktion von jQuery zum Wechseln der kreisförmigen Symbolmenürotation vor . . 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: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
}
.feature-presenter img {
max-width: 100%;
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
filter: blur(0px);
-webkit-filter: blur(0px);
image-rendering: -webkit-optimize-contrast;
}
.feature-presenter i {
font-size: 85px;
/*filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');*/
}
.feature-presenter-circle-container {
border-radius: 50%;
display: inline-block;
border: 1px solid rgba(0,0,0,0.09);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.09);
transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95);
-webkit-transition: -webkit-transform 0.7s cubic-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-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: transform 0.4s cubic-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-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
transition: transform 0.4s cubic-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-transform 0.5s ease-in;
transition: transform 0.5s ease-in;
}html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>基于jQuery环形图标菜单旋转切换特效</title>
<link href='css/feature.presenter.1.5.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>
<body>
<p id="test-element"></p>
<script src="js/feature.presenter.1.5.min.js"></script>
<script>
/* 图片地址可以是相对路径或绝对路径；标题和描述可以包含HTML */
var settings = [ {image: 'images/zzsc1.png', heading: '脚本之家', description: 'www.jb51.net'},
{ image: 'images/zzsc2.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc3.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc4.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc5.png', heading: '脚本之家', description: 'www.jb51.net' },
{ image: 'images/zzsc6.png', heading: '脚本之家', description: 'www.jb51.net' }
];
var options = {
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'
};
var fp = new FeaturePresenter($("#test-element"), settings, options);
fp.createPresenter();
</script>
</body>
</html>Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im chinesischen PHP-Website-Artikel!
Empfohlene Lektüre:
Detaillierte Erläuterung der Verwendung von JSON und XMLjsonp+json implementiert AJAX domänenübergreifend AnfragenDas obige ist der detaillierte Inhalt vonjQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
