jQuery implementiert den ziehbaren Wunschwandeffekt-js-Tutorial-php.cn

jQuery implementiert den ziehbaren Wunschwandeffekt

不言

Freigeben： 2018-07-02 15:05:21

Original

2405 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich jQuery vorgestellt, um den Drag-and-Drop-Wunschwandeffekt zu realisieren, der Drag-and-Drop-Bilder und kaskadierende Anzeigefunktionen realisieren kann. Es beinhaltet auch die einfache Verwendung von jQuery-Plug-Ins Quellcode für Leser zum Herunterladen und Nachschlagen. Weiter

Das Beispiel in diesem Artikel beschreibt die Implementierung eines ziehbaren Wunschwandeffekts mit jQuery. Teilen Sie es allen als Referenz mit. Die Einzelheiten lauten wie folgt:

Das Betriebseffektdiagramm lautet wie folgt:

Hier ist eine kurze Beschreibung Einführung in die Funktionspunkte:

① Hintergrundbild oder Hintergrundfarbe zufällig anzeigen
② Die angezeigte Position ist zufällig
③ Sie können die Position durch Ziehen ändern

Okay, fügen Sie den Code hinzu:

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

Nach dem Login kopieren

Hinweis:

jqueryui muss ziehbare und skalierbare Effekte laden Ziehen, während der Skalierungseffekt ein Click-to-Close-Effekt ist.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JQuery und Canvas realisieren den Flat-Wurf- und Farbdynamiktransformationseffekt

jQuery-Rotation der unteren rechten Ecke Implementierung von Ringmenü-Spezialeffekten

Das obige ist der detaillierte Inhalt vonjQuery implementiert den ziehbaren Wunschwandeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!