ホームページ > 記事 > ウェブフロントエンド > jQueryはドラッグ可能な願いの壁効果を実装します

jQueryはドラッグ可能な願いの壁効果を実装します

不言オリジナル: 2018-07-02 15:05:212277ブラウズ

この記事では、ドラッグアンドドロップの願いの壁効果を実現するための jQuery を主に紹介します。これには、jQuery プラグインの簡単な使用方法も含まれます。読者がダウンロードして参照できるようにします。必要な友人はそれを参照できます

この記事の例では、jQuery を使用したドラッグ可能な願いの壁エフェクトの実装について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

動作効果図は次のとおりです:

機能のポイントを簡単に紹介します:

① 背景画像または背景画像のランダム表示背景色
② ランダムな出現位置
③ はいドラッグして位置を変更します

わかりました、コードは次のとおりです:

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

注:

jqueryui はドラッグ可能とスケール効果をロードする必要があります。ドラッグ可能はドラッグをサポートしています。およびスケール効果は、クリックして閉じる効果です。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

jQueryはドラッグ可能な願いの壁効果を実装します

関連記事