recherche

Maison >interface Web >js tutoriel >jQuery implémente un effet de mur de souhaits déplaçable

jQuery implémente un effet de mur de souhaits déplaçable

不言
不言original
2018-07-02 15:05:212389parcourir

Cet article présente principalement jQuery pour réaliser l'effet de mur de souhaits glisser-déposer, qui peut réaliser des images glisser-déposer et des fonctions d'affichage en cascade. Il implique l'utilisation simple des plug-ins jQuery. Il est également livré avec une démo. code source que les lecteurs peuvent télécharger et consulter. Les amis dans le besoin peuvent s'y référer. Suivant

L'exemple de cet article décrit la mise en œuvre d'un effet de mur de souhaits déplaçable à l'aide de jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Le diagramme des effets de fonctionnement est le suivant :

Voici un bref introduction aux points de fonction :

① Afficher aléatoirement l'image d'arrière-plan ou la couleur d'arrière-plan
② La position d'apparition est aléatoire
③ Vous pouvez modifier la position en faisant glisser

D'accord, attachez le code : 

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>许愿墙</title>
  <link rel="stylesheet" href="base.min.css"/>
  <style>
  #wish{height:650px;margin:20px;position:relative;width:960px;}
  .wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}
  .wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}
  </style>
</head>
<body>
  <ul id="wish">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
  </ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
  $(&#39;#wish&#39;).wish();
  $(&#39;.wish&#39;).draggable({containment:&#39;#wish&#39;,scroll:false});
});
</script>

Remarque :

jqueryui doit charger un effet déplaçable et mis à l'échelle. Draggable prend en charge le glisser, tandis que l'effet d'échelle peut être cliqué pour fermer.

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. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

JQuery et Canvas réalisent l'effet de projection à plat et de transformation dynamique des couleurs

Rotation du coin inférieur droit de jQuery Mise en place des effets spéciaux du menu en anneau

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!

php jquery canvas
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Trois façons d'obtenir des sources de données dans AngularJSArticle suivant：Trois façons d'obtenir des sources de données dans AngularJS

Articles Liés

Voir plus