首页 > 上网技巧 > 电脑小技巧 > Zepto实现滑动删除效果

Zepto实现滑动删除效果

时间:2018-11-24 08:58 作者:QQ地带 我要评论

  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head lang="en"> 
  4.         <meta charset="UTF-8"> 
  5.         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> 
  6.         <title></title> 
  7.         <style> 
  8.             .delete { 
  9.                 display: none; 
  10.                 border: 1px solid #a1a5a6; 
  11.                 padding: 4px 8px; 
  12.                 background: #d5dbd6; 
  13.                 font-size: 14px; 
  14.                 border-radius: 4px; 
  15.             } 
  16.  
  17.             #items li { 
  18.                 list-style: none; 
  19.                 padding-top: 10px; 
  20.             } 
  21.         </style> 
  22.     </head> 
  23.  
  24.     <body> 
  25.         <ul id="items"> 
  26.             <li>我是要删除的内容1 
  27.                 <span class="delete">DELETE</span> 
  28.             </li> 
  29.             <li>我是要删除的内容2 
  30.                 <span class="delete">DELETE</span> 
  31.             </li> 
  32.         </ul> 
  33.  
  34.         <script src="js/zepto.js"></script> 
  35.         <script> 
  36.             //在对应的内容上滑动,显示对应的删除标签 
  37.             $('#items li').swipe(function() { 
  38.                 $('.delete').hide(); 
  39.                 $('.delete', this).show(); 
  40.             }); 
  41.  
  42.             //点击删除标签时,实现删除该行的内容 
  43.             $('.delete').tap(function() { 
  44.                 $(this).parent('li').remove(); 
  45.             }) 
  46.         </script> 
  47.     </body> 
  48.  
  49. </html> 

 


标签: zepto
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告