jQuery implémente un effet de mur de souhaits déplaçable-js tutoriel-php.cn

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

不言

Libérer： 2018-07-02 15:05:21

original

2365 Les gens l'ont consulté

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>

Copier après la connexion

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!