L'exemple de cet article décrit le processus d'implémentation de l'utilisation de jquery pour ajouter des liens dynamiques aux images par glisser-déposer. J'aimerais le partager avec vous pour votre référence. Les détails sont les suivants :
La capture d'écran de l'effet en cours d'exécution est la suivante :
Selon les exigences du projet, vous devez ajouter différents liens vers une image. Par exemple, l'image est une suite avec un canapé, une table basse, une cave à vin, un meuble TV, etc. Ajoutez ensuite un hyperlien vers ceux-ci. objets et cliquez sur Puis ouvrez l'introduction des produits associés.
Écrit une fonction pour ajouter des points d'ancrage aux images en utilisant jquery Le principe d'implémentation : Une zone de texte pour écrire le titre, une zone de texte pour écrire le lien, une pour ajouter. le bouton et un bouton Modifier. Après avoir écrit le contenu, cliquez sur Ajouter et une étiquette P apparaîtra au-dessus de l'image. Appuyez ensuite sur le bouton gauche de la souris et faites glisser l'étiquette à l'endroit correspondant et relâchez-la. code.
Première importation de la bibliothèque jquery
1 |
|
Construisez du HTML.
1 2 3 4 5 6 7 8 9 |
|
Écrivez CSS Notez que la position de l'étiquette ici est relative à la position de l'image, donc l'img_box de l'image doit être ajoutée avec position: relative;
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Écrire en JS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
|
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.