jQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole-js-Tutorial-php.cn

jQuery ermöglicht die Funktion zum Umschalten der Menürotation kreisförmiger Symbole

php中世界最好的语言

Freigeben： 2018-04-25 17:38:00

Original

1884 Leute haben es durchsucht

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;
}

Nach dem Login kopieren

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=&#39;css/feature.presenter.1.5.css&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>
<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>

Nach dem Login kopieren

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 XML

jsonp+json implementiert AJAX domänenübergreifend Anfragen

Das 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!