Esempio di effetto di parete di desideri trascinabile implementato con jQuery [scarica demo di codice源码]

Questo esempio spiega come implementare un muro dei desideri trascinabile con jQuery. Condivido questo con tutti voi per riferimento, come segue:

Ecco l'effetto di esecuzione:

Ecco una breve introduzione ai punti funzionali:

① Visualizza casualmente immagini di sfondo o colori di sfondo
② La posizione appare casualmente
③ Puoi cambiare la posizione trascinando

Bene, ecco il codice:

<!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(){
  $('#wish').wish();
  $('.wish').draggable({containment:'#wish',scroll:false});
});
</script>

Attenzione:

jqueryui deve caricare draggable e scale Effect, draggable supporta il trascinamento, mentre scale Effect è l'effetto di chiusura al click.

Clicca qui per ottenere il codice di esempio completoScarica il sito.

Per chi è interessato a ulteriori contenuti jQuery, è possibile consultare le sezioni speciali di questo sito: 'Riassunto delle tecniche e degli effetti di trascinamento jQuery', 'Riassunto delle estensioni e delle applicazioni di plugin jQuery', 'Riassunto dell'applicazione di Ajax in jQuery', 'Riassunto delle tecniche di manipolazione delle tabelle (table) in jQuery', 'Riassunto delle tecniche di estensione jQuery', 'Riassunto degli effetti classici comuni jQuery', 'Riassunto dell'applicazione di animazione ed effetti jQuery' e 'Riassunto delle tecniche di selezione degli elementi jQuery'.

Spero che il contenuto di questo articolo possa essere utile per la progettazione di programmi jQuery di tutti.

Dichiarazione: il contenuto di questo articolo è stato prelevato da Internet, il copyright spetta agli autori originali, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non possiede il diritto di proprietà, non è stato editato manualmente e non assume responsabilità per le relative responsabilità legali. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.

Tutorial di base