複製図
ステップ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をもっとサポートできることを願っています。