複製図
ステップ1：読み込み
<script src = "js/jquery.min.js"> </script> <script src = "js/jquery.mobile-1.3.2.min.js"> </scrip>
ステップ2：HTML
<div> <div> <img src = "images/icon.png"> </div> <d div> <p> <p>ミニオン</p> <p>ミニオン</p> <p>ミニオン</p> <p>ミニオン</p> <p>ミニオン</p> </div> <i> </i> src = "images/icon.png"> </div> <div> <p> minions </p> <p> minions </p> <p> minions </p> <p> minions </p> <p>ミニオン</p> </div> <i> </i> <a> delete </a>
ステップ2：CSS
.item-wrap {overflow：hidden; } .item-wrap .item {border-bottom：1px #ff solid;背景：＃000;幅：125％;オーバーフロー：隠し;位置：相対;ディスプレイ：-WebKit -Box; -Webkit-Transition：すべて0.3S線形。 } .item-wrap .item .img-item {width：50px;高さ：50px;マージン：10px; } .item-wrap .item .img-item img {width：100％;ボーダーラジウス：50％; } .item-wrap .item .txt-item {padding-top：10px;マージン右：25px;フォントサイズ：14px;ラインハイト：24px;色：#fff; -webkit-box-flex：1; } .item-wrap .item .arrow {width：0;高さ：0; Line-Height：0;フォントサイズ：0;ボーダースタイル：ソリッド;境界線：透明な透明な透明#FFF;境界線：8px 0px 8px 8px;位置：絶対;右：22％;トップ：50％;マージントップ：-8px;}。delect-btn {width：20％;マージン左：15px;色：#fff;背景：＃0F0; Z-Index：999;表示：ブロック;テキストアライグ：センター;パディングトップ：5％;}。item-wrap .selected {-webkit-transform：translate（-16％）; -webkit-transition：すべて0.3s線形;}ステップ2：JQ
<script> $（ "。アイテム"）。on（ 'swipeleft'、function（event）{event.preventdefault（）; / * act on the event * / $（this）addclass（ 'selected'）。 event.preventdefault（）; * / $（ "。アイテム"）。 $（ "。item"）。on（ 'swiperight'、function（event）{event.preventdefault（）;/ * act on the event */$（this）.removeclass（ 'selected'）; </scrip>）; </script>上記の記事JQは、左のスワイプを実現して削除ボタンを表示します。クリックして削除して、削除データ機能（推奨）が私が共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。