interface Web
js tutoriel
jQuery crée une fonction de commutation de rotation de menu d'icônes circulaires
jQuery crée une fonction de commutation de rotation de menu d'icônes circulaires
Cette fois, je vous présente la fonction de jQuery pour effectuer une commutation de rotation de menu d'icônes circulaires. Quelles sont les précautions pour que jQuery effectue une commutation de rotation de menu d'icônes circulaires. Voici un cas pratique. .
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>Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour en savoir plus. des choses passionnantes, veuillez faire attention à php Autres articles connexes sur le site chinois !
Lecture recommandée :
Explication détaillée de l'utilisation de JSON et XML
jsonp+json implémente AJAX cross-domain demandes
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment désactiver l'aperçu des vignettes de la barre des tâches dans Win11 ? Désactivez la technique d'affichage des vignettes de l'icône de la barre des tâches en déplaçant la souris
Feb 29, 2024 pm 03:20 PM
Cet article explique comment désactiver la fonction de vignette affichée lorsque la souris déplace l'icône de la barre des tâches dans le système Win11. Cette fonctionnalité est activée par défaut et affiche une vignette de la fenêtre actuelle de l'application lorsque l'utilisateur passe le pointeur de la souris sur une icône d'application dans la barre des tâches. Cependant, certains utilisateurs peuvent trouver cette fonctionnalité moins utile ou perturber leur expérience et souhaiter la désactiver. Les miniatures de la barre des tâches peuvent être amusantes, mais elles peuvent aussi être distrayantes ou ennuyeuses. Compte tenu de la fréquence à laquelle vous survolez cette zone, vous avez peut-être fermé plusieurs fois des fenêtres importantes par inadvertance. Un autre inconvénient est qu'il utilise plus de ressources système, donc si vous cherchez un moyen d'être plus efficace en ressources, nous allons vous montrer comment le désactiver. mais
Comment insérer des icônes Excel dans les diapositives PPT
Mar 26, 2024 pm 05:40 PM
1. Ouvrez le PPT et tournez la page jusqu'à la page où vous devez insérer l'icône Excel. Cliquez sur l'onglet Insérer. 2. Cliquez sur [Objet]. 3. La boîte de dialogue suivante apparaîtra. 4. Cliquez sur [Créer à partir d'un fichier], puis cliquez sur [Parcourir]. 5. Sélectionnez le tableau Excel à insérer. 6. Cliquez sur OK et la page suivante apparaîtra. 7. Cochez [Afficher sous forme d'icône]. 8. Cliquez sur OK.
Comment annuler la suppression de l'écran d'accueil sur iPhone
Apr 17, 2024 pm 07:37 PM
Vous avez supprimé quelque chose d'important de votre écran d'accueil et vous essayez de le récupérer ? Vous pouvez remettre les icônes d’applications à l’écran de différentes manières. Nous avons discuté de toutes les méthodes que vous pouvez suivre et remettre l'icône de l'application sur l'écran d'accueil. Comment annuler la suppression de l'écran d'accueil sur iPhone Comme nous l'avons mentionné précédemment, il existe plusieurs façons de restaurer cette modification sur iPhone. Méthode 1 – Remplacer l'icône de l'application dans la bibliothèque d'applications Vous pouvez placer une icône d'application sur votre écran d'accueil directement à partir de la bibliothèque d'applications. Étape 1 – Faites glisser votre doigt sur le côté pour trouver toutes les applications de la bibliothèque d'applications. Étape 2 – Recherchez l'icône de l'application que vous avez supprimée précédemment. Étape 3 – Faites simplement glisser l'icône de l'application de la bibliothèque principale vers le bon emplacement sur l'écran d'accueil. Voici le schéma d'application
Que dois-je faire si l'icône de la méthode de saisie Win10 est manquante ? Comment récupérer l'icône de la méthode de saisie Win10 après sa perte ?
Feb 29, 2024 am 11:52 AM
Une fois l’icône de la méthode de saisie Win10 perdue, de nombreux utilisateurs ne savent pas comment la récupérer. Cet article présentera des méthodes simples pour aider les utilisateurs à récupérer l'icône de la méthode de saisie Win10, vous permettant de changer facilement de méthode de saisie et d'améliorer l'efficacité du travail. 1. Raisons de l'absence de méthode de saisie 1. Problème de disposition du clavier : Si vous changez accidentellement la disposition du clavier, par exemple en passant du chinois à l'anglais ou à d'autres langues, la méthode de saisie peut disparaître temporairement. 2. Problème de paramétrage de la méthode de saisie : Dans les paramètres système, nous pouvons personnaliser le mode d’affichage de la méthode de saisie. Des paramètres incorrects peuvent empêcher l'affichage ou le masquage de la méthode de saisie. 3. Erreurs ou plantages de la méthode de saisie : le logiciel de méthode de saisie lui-même peut présenter des erreurs ou des plantages, entraînant un échec de l'affichage correct de la méthode de saisie. 2. Comment appeler la méthode de saisie Méthode 1 : 1. Appuyez sur [Win+
Comment masquer la flèche de l'icône de raccourci dans Win11 ? Partage de méthode cachée
May 09, 2024 pm 01:00 PM
De nombreux utilisateurs ont l'habitude de masquer les petites flèches d'icônes sur le bureau, alors comment doivent-ils procéder ? Prenons l'exemple du système Win11 pour vous donner une démonstration détaillée : Méthode de la flèche de l'icône Win11 1. Appuyez sur la touche de raccourci win+r, entrez regedit et cliquez sur OK. 2. Entrez dans l'éditeur de registre, ouvrez : HKEY_CLASSES_ROOTlnkfile et sélectionnez l'élément lsShortcut dans la fenêtre de droite. 3. Cliquez avec le bouton droit sur l'élément lsShortcut, cliquez sur l'option Supprimer et supprimez lsShortcut. 4. Enfin, redémarrez l'ordinateur et vous verrez que la petite flèche du raccourci sur le bureau disparaît. Outils tiers : Xiaozhi Launcher Xiaozhi Launcher est un organisateur de bureau très convivial et pratique.
Comment changer l'icône de Google Chrome ? Comment changer l'icône de Google Chrome
Mar 13, 2024 pm 08:50 PM
Comment changer l'icône de Google Chrome ? Certains utilisateurs en ont assez de l'icône par défaut de Google Chrome et souhaitent la remplacer par une autre. Cependant, Google Chrome propose aux utilisateurs une fonction gratuite de modification d'icône, qui doit simplement être configurée. Ensuite, l'éditeur partagera la méthode de modification de l'icône Google Chrome. Si vous êtes intéressé, venez l'essayer. Comment modifier : 1. Recherchez le raccourci Google Chrome sur le bureau et cliquez sur [clic droit] - [Propriétés]. 2. Cliquez sur [Changer d'icône], comme indiqué sur la figure. 3. Sélectionnez l'icône dont vous avez besoin et cliquez sur [OK], comme indiqué sur l'image.
Comment utiliser la méthode de requête PUT dans jQuery ?
Feb 28, 2024 pm 03:12 PM
Comment utiliser la méthode de requête PUT dans jQuery ? Dans jQuery, la méthode d'envoi d'une requête PUT est similaire à l'envoi d'autres types de requêtes, mais vous devez faire attention à certains détails et paramètres. Les requêtes PUT sont généralement utilisées pour mettre à jour des ressources, comme la mise à jour de données dans une base de données ou la mise à jour de fichiers sur le serveur. Ce qui suit est un exemple de code spécifique utilisant la méthode de requête PUT dans jQuery. Tout d'abord, assurez-vous d'inclure le fichier de la bibliothèque jQuery, puis vous pourrez envoyer une requête PUT via : $.ajax({u
Comment résoudre le problème selon lequel la distance entre les icônes dans le coin inférieur droit de Win11 devient plus grande ? Liste des solutions
Jun 10, 2024 pm 03:47 PM
Sous le système Win11, certains utilisateurs ont rencontré le problème de l'espacement des icônes dans le coin inférieur droit de Win11. Alors, comment résoudre ce problème ? Jetons un coup d'œil ci-dessous ! Tout d’abord, nous devons ouvrir l’interface des paramètres de Win11. Cliquez sur le bouton Démarrer de la barre des tâches et sélectionnez Paramètres. Dans l'interface des paramètres, recherchez l'option « Personnalisation » et cliquez sur « Barre des tâches ». Dans les paramètres de la barre des tâches, nous pouvons voir une option « Espacement des icônes ». Redimensionnez-le pour l'adapter à vos besoins et cliquez sur le bouton Appliquer pour enregistrer les paramètres. La solution est simple, mais il y a certaines choses auxquelles nous devons prêter attention. Tout d'abord, lors du réglage de l'espacement des icônes, veillez à ne pas le régler trop petit, sinon les icônes pourraient se chevaucher et affecter l'utilisation. Deuxièmement, si vous
