zoukankan      html  css  js  c++  java
  • 左右滑动事件,左划出现删除按钮,右滑隐藏

    先看效果图:

    参考了别人写的demo做了修改,参考地址:https://github.com/Orange1991/demos-in-sfg.name/tree/14eeaec62f2cba35ec42666080484f9647902d72

    做了修改的测试代码:

      1 <!doctype html>
      2 <html>
      3 
      4     <head>
      5         <meta charset="utf-8">
      6         <title>左划出现删除按钮,右滑隐藏</title>
      7         <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
      8         <script type="text/javascript">
      9             function init() {
     10 
     11                 // 设定每一行的宽度=屏幕宽度+按钮宽度
     12                 $(".line-scroll-wrapper").width($(".line-wrapper").width() + $(".line-btn-delete").width());
     13                 // 设定常规信息区域宽度=屏幕宽度
     14                 $(".line-normal-wrapper").width($(".line-wrapper").width());
     15                 // 设定文字部分宽度(为了实现文字过长时在末尾显示...)
     16                 $(".line-normal-msg").width($(".line-normal-wrapper").width() - 280);
     17 
     18                 // 获取所有行,对每一行设置监听
     19                 var lines = $(".line-normal-wrapper");
     20                 var len = lines.length;
     21                 var lastX, lastXForMobile;
     22 
     23                 // 用于记录被按下的对象
     24                 var pressedObj; // 当前左滑的对象
     25                 var lastLeftObj; // 上一个左滑的对象
     26 
     27                 // 用于记录按下的点
     28                 var start;
     29 
     30                 // 网页在移动端运行时的监听
     31                 for(var i = 0; i < len; ++i) {
     32                     lines[i].addEventListener('touchstart', function(e) {
     33                         lastXForMobile = e.changedTouches[0].pageX;
     34                         pressedObj = this; // 记录被按下的对象 
     35 
     36                         // 记录开始按下时的点
     37                         var touches = event.touches[0];
     38                         start = {
     39                             x: touches.pageX, // 横坐标
     40                             y: touches.pageY // 纵坐标
     41                         };
     42                     });
     43 
     44                     lines[i].addEventListener('touchmove', function(e) {
     45                         // 计算划动过程中x和y的变化量
     46                         var touches = event.touches[0];
     47                         delta = {
     48                             x: touches.pageX - start.x,
     49                             y: touches.pageY - start.y
     50                         };
     51 
     52                         // 横向位移大于纵向位移,阻止纵向滚动
     53                         if(Math.abs(delta.x) > Math.abs(delta.y)) {
     54                             event.preventDefault();
     55                         }
     56                     });
     57 
     58                     lines[i].addEventListener('touchend', function(e) {
     59                         if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
     60                             $(lastLeftObj).animate({
     61                                 marginLeft: "0"
     62                             }, 500); // 右滑
     63                             lastLeftObj = null; // 清空上一个左滑的对象
     64                         }
     65                         var diffX = e.changedTouches[0].pageX - lastXForMobile;
     66                         if(diffX < -150) {
     67                             $(pressedObj).animate({
     68                                 marginLeft: "-132px"
     69                             }, 500); // 左滑
     70                             lastLeftObj && lastLeftObj != pressedObj &&
     71                                 $(lastLeftObj).animate({
     72                                     marginLeft: "0"
     73                                 }, 500); // 已经左滑状态的按钮右滑
     74                             lastLeftObj = pressedObj; // 记录上一个左滑的对象
     75                         } else if(diffX > 150) {
     76                             if(pressedObj == lastLeftObj) {
     77                                 $(pressedObj).animate({
     78                                     marginLeft: "0"
     79                                 }, 500); // 右滑
     80                                 lastLeftObj = null; // 清空上一个左滑的对象
     81                             }
     82                         }
     83                     });
     84                 }
     85 
     86                 // 网页在PC浏览器中运行时的监听
     87                 for(var i = 0; i < len; ++i) {
     88                     $(lines[i]).bind('mousedown', function(e) {
     89                         lastX = e.clientX;
     90                         pressedObj = this; // 记录被按下的对象
     91                     });
     92 
     93                     $(lines[i]).bind('mouseup', function(e) {
     94                         if(lastLeftObj && pressedObj != lastLeftObj) { // 点击除当前左滑对象之外的任意其他位置
     95                             $(lastLeftObj).animate({
     96                                 marginLeft: "0"
     97                             }, 500); // 右滑
     98                             lastLeftObj = null; // 清空上一个左滑的对象
     99                         }
    100                         var diffX = e.clientX - lastX;
    101                         if(diffX < -150) {
    102                             $(pressedObj).animate({
    103                                 marginLeft: "-132px"
    104                             }, 500); // 左滑
    105                             lastLeftObj && lastLeftObj != pressedObj &&
    106                                 $(lastLeftObj).animate({
    107                                     marginLeft: "0"
    108                                 }, 500); // 已经左滑状态的按钮右滑
    109                             lastLeftObj = pressedObj; // 记录上一个左滑的对象
    110                         } else if(diffX > 150) {
    111                             if(pressedObj == lastLeftObj) {
    112                                 $(pressedObj).animate({
    113                                     marginLeft: "0"
    114                                 }, 500); // 右滑
    115                                 lastLeftObj = null; // 清空上一个左滑的对象
    116                             }
    117                         }
    118                     });
    119                 }
    120             }
    121 
    122             $(function() {
    123                 init();
    124                 var pageNum = 1;
    125 
    126                 function GetListPageFun() { //请求获取数据
    127                     var html = [];
    128                     for(var i = 0; i < 15; i++) {
    129                         html[i] = '<div class="line-wrapper"><div class="line-scroll-wrapper"><div class="line-normal-wrapper"><div class="line-normal-left-wrapper"><div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div><div class="line-normal-info-wrapper">    <div class="line-normal-user-name">蜡笔小新</div><div class="line-normal-msg">在同行的小伙伴中提到了你</div><div class="line-normal-time">1分钟前</div></div></div><div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div></div><div class="line-btn-delete"><button>删除</button></div></div></div>';
    130                     }
    131                     $("#data").append(html.join(""))
    132                 }
    133                 $(window).scroll(function() { //分页
    134                     if($(window).scrollTop() + $(window).height() >= $(document).height() - 30) { //滚动到底部时
    135                         pageNum += 1;
    136                         GetListPageFun();
    137                         init();
    138                     }
    139                 });
    140 
    141             });
    142         </script>
    143 
    144         <script type="text/javascript">
    145         </script>
    146         <style type="text/css">
    147             * {
    148                 margin: 0;
    149                 padding: 0;
    150             }
    151             
    152             .line-wrapper {
    153                 width: 100%;
    154                 height: 144px;
    155                 overflow: hidden;
    156                 font-size: 28px;
    157                 border-bottom: 1px solid #aaa;
    158             }
    159             
    160             .line-scroll-wrapper {
    161                 white-space: nowrap;
    162                 height: 144px;
    163                 clear: both;
    164             }
    165             
    166             .line-btn-delete {
    167                 float: left;
    168                 width: 132px;
    169                 height: 144px;
    170             }
    171             
    172             .line-btn-delete button {
    173                 width: 100%;
    174                 height: 100%;
    175                 background: red;
    176                 border: none;
    177                 font-size: 24px;
    178                 font-family: 'Microsoft Yahei';
    179                 color: #fff;
    180             }
    181             
    182             .line-normal-wrapper {
    183                 display: inline-block;
    184                 line-height: 100px;
    185                 float: left;
    186                 padding-top: 10px;
    187                 padding-bottom: 10px;
    188             }
    189             
    190             .line-normal-icon-wrapper {
    191                 float: right;
    192                 width: 120px;
    193                 height: 120px;
    194                 margin-right: 12px;
    195             }
    196             
    197             .line-normal-icon-wrapper img {
    198                 width: 120px;
    199                 height: 120px;
    200             }
    201             
    202             .line-normal-avatar-wrapper {
    203                 width: 100px;
    204                 height: 124px;
    205                 float: left;
    206                 margin-left: 12px;
    207             }
    208             
    209             .line-normal-avatar-wrapper img {
    210                 width: 92px;
    211                 height: 92px;
    212                 border-radius: 60px;
    213             }
    214             
    215             .line-normal-left-wrapper {
    216                 float: left;
    217                 overflow: hidden;
    218             }
    219             
    220             .line-normal-info-wrapper {
    221                 float: left;
    222                 margin-left: 10px;
    223             }
    224             
    225             .line-normal-user-name {
    226                 height: 28px;
    227                 line-height: 28px;
    228                 color: #4e4e4e;
    229                 margin-top: 7px;
    230             }
    231             
    232             .line-normal-msg {
    233                 height: 28px;
    234                 line-height: 28px;
    235                 overflow: hidden;
    236                 text-overflow: ellipsis;
    237                 color: #4e4e4e;
    238                 margin-top: 11px;
    239             }
    240             
    241             .line-normal-time {
    242                 height: 28px;
    243                 line-height: 28px;
    244                 color: #999;
    245                 margin-top: 11px;
    246             }
    247         </style>
    248     </head>
    249 
    250     <body id="data">
    251         <div class="line-wrapper">
    252             <div class="line-scroll-wrapper">
    253                 <div class="line-normal-wrapper">
    254                     <div class="line-normal-left-wrapper">
    255                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    256                         <div class="line-normal-info-wrapper">
    257                             <div class="line-normal-user-name">蜡笔小新</div>
    258                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    259                             <div class="line-normal-time">1分钟前</div>
    260                         </div>
    261                     </div>
    262                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    263                 </div>
    264                 <div class="line-btn-delete"><button>删除</button></div>
    265             </div>
    266         </div>
    267         <div class="line-wrapper">
    268             <div class="line-scroll-wrapper">
    269                 <div class="line-normal-wrapper">
    270                     <div class="line-normal-left-wrapper">
    271                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    272                         <div class="line-normal-info-wrapper">
    273                             <div class="line-normal-user-name">乔巴</div>
    274                             <div class="line-normal-msg">你看不到我哦</div>
    275                             <div class="line-normal-time">1分钟前</div>
    276                         </div>
    277                     </div>
    278                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    279                 </div>
    280                 <div class="line-btn-delete"><button>删除</button></div>
    281             </div>
    282         </div>
    283         <div class="line-wrapper">
    284             <div class="line-scroll-wrapper">
    285                 <div class="line-normal-wrapper">
    286                     <div class="line-normal-left-wrapper">
    287                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    288                         <div class="line-normal-info-wrapper">
    289                             <div class="line-normal-user-name">贱行贱远</div>
    290                             <div class="line-normal-msg">回忆里想起模糊的小时候,云朵漂浮在蓝蓝的天空,那时的你说,要和我手牵手,一起走到时间的尽头</div>
    291                             <div class="line-normal-time">1分钟前</div>
    292                         </div>
    293                     </div>
    294                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    295                 </div>
    296                 <div class="line-btn-delete"><button>删除</button></div>
    297             </div>
    298         </div>
    299         <div class="line-wrapper">
    300             <div class="line-scroll-wrapper">
    301                 <div class="line-normal-wrapper">
    302                     <div class="line-normal-left-wrapper">
    303                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    304                         <div class="line-normal-info-wrapper">
    305                             <div class="line-normal-user-name">小黄人</div>
    306                             <div class="line-normal-msg">哈哈哈哈哈……暑假来看小黄人电影哦~哈哈哈……</div>
    307                             <div class="line-normal-time">1分钟前</div>
    308                         </div>
    309                     </div>
    310                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    311                 </div>
    312                 <div class="line-btn-delete"><button>删除</button></div>
    313             </div>
    314         </div>
    315         <div class="line-wrapper">
    316             <div class="line-scroll-wrapper">
    317                 <div class="line-normal-wrapper">
    318                     <div class="line-normal-left-wrapper">
    319                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    320                         <div class="line-normal-info-wrapper">
    321                             <div class="line-normal-user-name">蜡笔小新</div>
    322                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    323                             <div class="line-normal-time">1分钟前</div>
    324                         </div>
    325                     </div>
    326                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    327                 </div>
    328                 <div class="line-btn-delete"><button>删除</button></div>
    329             </div>
    330         </div>
    331         <div class="line-wrapper">
    332             <div class="line-scroll-wrapper">
    333                 <div class="line-normal-wrapper">
    334                     <div class="line-normal-left-wrapper">
    335                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    336                         <div class="line-normal-info-wrapper">
    337                             <div class="line-normal-user-name">蜡笔小新</div>
    338                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    339                             <div class="line-normal-time">1分钟前</div>
    340                         </div>
    341                     </div>
    342                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    343                 </div>
    344                 <div class="line-btn-delete"><button>删除</button></div>
    345             </div>
    346         </div>
    347         <div class="line-wrapper">
    348             <div class="line-scroll-wrapper">
    349                 <div class="line-normal-wrapper">
    350                     <div class="line-normal-left-wrapper">
    351                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    352                         <div class="line-normal-info-wrapper">
    353                             <div class="line-normal-user-name">蜡笔小新</div>
    354                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    355                             <div class="line-normal-time">1分钟前</div>
    356                         </div>
    357                     </div>
    358                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    359                 </div>
    360                 <div class="line-btn-delete"><button>删除</button></div>
    361             </div>
    362         </div>
    363         <div class="line-wrapper">
    364             <div class="line-scroll-wrapper">
    365                 <div class="line-normal-wrapper">
    366                     <div class="line-normal-left-wrapper">
    367                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    368                         <div class="line-normal-info-wrapper">
    369                             <div class="line-normal-user-name">蜡笔小新</div>
    370                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    371                             <div class="line-normal-time">1分钟前</div>
    372                         </div>
    373                     </div>
    374                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    375                 </div>
    376                 <div class="line-btn-delete"><button>删除</button></div>
    377             </div>
    378         </div>
    379         <div class="line-wrapper">
    380             <div class="line-scroll-wrapper">
    381                 <div class="line-normal-wrapper">
    382                     <div class="line-normal-left-wrapper">
    383                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    384                         <div class="line-normal-info-wrapper">
    385                             <div class="line-normal-user-name">蜡笔小新</div>
    386                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    387                             <div class="line-normal-time">1分钟前</div>
    388                         </div>
    389                     </div>
    390                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    391                 </div>
    392                 <div class="line-btn-delete"><button>删除</button></div>
    393             </div>
    394         </div>
    395         <div class="line-wrapper">
    396             <div class="line-scroll-wrapper">
    397                 <div class="line-normal-wrapper">
    398                     <div class="line-normal-left-wrapper">
    399                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    400                         <div class="line-normal-info-wrapper">
    401                             <div class="line-normal-user-name">蜡笔小新</div>
    402                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    403                             <div class="line-normal-time">1分钟前</div>
    404                         </div>
    405                     </div>
    406                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    407                 </div>
    408                 <div class="line-btn-delete"><button>删除</button></div>
    409             </div>
    410         </div>
    411         <div class="line-wrapper">
    412             <div class="line-scroll-wrapper">
    413                 <div class="line-normal-wrapper">
    414                     <div class="line-normal-left-wrapper">
    415                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    416                         <div class="line-normal-info-wrapper">
    417                             <div class="line-normal-user-name">蜡笔小新</div>
    418                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    419                             <div class="line-normal-time">1分钟前</div>
    420                         </div>
    421                     </div>
    422                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    423                 </div>
    424                 <div class="line-btn-delete"><button>删除</button></div>
    425             </div>
    426         </div>
    427         <div class="line-wrapper">
    428             <div class="line-scroll-wrapper">
    429                 <div class="line-normal-wrapper">
    430                     <div class="line-normal-left-wrapper">
    431                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    432                         <div class="line-normal-info-wrapper">
    433                             <div class="line-normal-user-name">蜡笔小新</div>
    434                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    435                             <div class="line-normal-time">1分钟前</div>
    436                         </div>
    437                     </div>
    438                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    439                 </div>
    440                 <div class="line-btn-delete"><button>删除</button></div>
    441             </div>
    442         </div>
    443         <div class="line-wrapper">
    444             <div class="line-scroll-wrapper">
    445                 <div class="line-normal-wrapper">
    446                     <div class="line-normal-left-wrapper">
    447                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    448                         <div class="line-normal-info-wrapper">
    449                             <div class="line-normal-user-name">蜡笔小新</div>
    450                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    451                             <div class="line-normal-time">1分钟前</div>
    452                         </div>
    453                     </div>
    454                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    455                 </div>
    456                 <div class="line-btn-delete"><button>删除</button></div>
    457             </div>
    458         </div>
    459         <div class="line-wrapper">
    460             <div class="line-scroll-wrapper">
    461                 <div class="line-normal-wrapper">
    462                     <div class="line-normal-left-wrapper">
    463                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    464                         <div class="line-normal-info-wrapper">
    465                             <div class="line-normal-user-name">蜡笔小新</div>
    466                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    467                             <div class="line-normal-time">1分钟前</div>
    468                         </div>
    469                     </div>
    470                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    471                 </div>
    472                 <div class="line-btn-delete"><button>删除</button></div>
    473             </div>
    474         </div>
    475         <div class="line-wrapper">
    476             <div class="line-scroll-wrapper">
    477                 <div class="line-normal-wrapper">
    478                     <div class="line-normal-left-wrapper">
    479                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    480                         <div class="line-normal-info-wrapper">
    481                             <div class="line-normal-user-name">蜡笔小新</div>
    482                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    483                             <div class="line-normal-time">1分钟前</div>
    484                         </div>
    485                     </div>
    486                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    487                 </div>
    488                 <div class="line-btn-delete"><button>删除</button></div>
    489             </div>
    490         </div>
    491         <div class="line-wrapper">
    492             <div class="line-scroll-wrapper">
    493                 <div class="line-normal-wrapper">
    494                     <div class="line-normal-left-wrapper">
    495                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    496                         <div class="line-normal-info-wrapper">
    497                             <div class="line-normal-user-name">蜡笔小新</div>
    498                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    499                             <div class="line-normal-time">1分钟前</div>
    500                         </div>
    501                     </div>
    502                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    503                 </div>
    504                 <div class="line-btn-delete"><button>删除</button></div>
    505             </div>
    506         </div>
    507         <div class="line-wrapper">
    508             <div class="line-scroll-wrapper">
    509                 <div class="line-normal-wrapper">
    510                     <div class="line-normal-left-wrapper">
    511                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    512                         <div class="line-normal-info-wrapper">
    513                             <div class="line-normal-user-name">蜡笔小新</div>
    514                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    515                             <div class="line-normal-time">1分钟前</div>
    516                         </div>
    517                     </div>
    518                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    519                 </div>
    520                 <div class="line-btn-delete"><button>删除</button></div>
    521             </div>
    522         </div>
    523         <div class="line-wrapper">
    524             <div class="line-scroll-wrapper">
    525                 <div class="line-normal-wrapper">
    526                     <div class="line-normal-left-wrapper">
    527                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    528                         <div class="line-normal-info-wrapper">
    529                             <div class="line-normal-user-name">蜡笔小新</div>
    530                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    531                             <div class="line-normal-time">1分钟前</div>
    532                         </div>
    533                     </div>
    534                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    535                 </div>
    536                 <div class="line-btn-delete"><button>删除</button></div>
    537             </div>
    538         </div>
    539         <div class="line-wrapper">
    540             <div class="line-scroll-wrapper">
    541                 <div class="line-normal-wrapper">
    542                     <div class="line-normal-left-wrapper">
    543                         <div class="line-normal-avatar-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    544                         <div class="line-normal-info-wrapper">
    545                             <div class="line-normal-user-name">蜡笔小新</div>
    546                             <div class="line-normal-msg">在同行的小伙伴中提到了你</div>
    547                             <div class="line-normal-time">1分钟前</div>
    548                         </div>
    549                     </div>
    550                     <div class="line-normal-icon-wrapper"><img src="http://www.baidu.com/img/bd_logo1.png" /></div>
    551                 </div>
    552                 <div class="line-btn-delete"><button>删除</button></div>
    553             </div>
    554         </div>
    555 
    556     </body>
    557 
    558 </html>
  • 相关阅读:
    Cannot change network to bridged: There are no un-bridged host network adapters解决方法
    The authenticity of host 192.168.0.xxx can't be established.
    Vm下 linux与windowsxp文件共享的方法
    vmware 下的linux的host only上网配置
    VMWare三种工作模式 :bridge、host-only、nat
    云技术入门指导:什么是云计算技术,云技术用什么语言开发
    什么是移动云计算
    云计算是什么
    架构之路
    这首诗看着是越看越顺眼,百赋乐其中
  • 原文地址:https://www.cnblogs.com/linJie1930906722/p/5870120.html
Copyright © 2011-2022 走看看