觸屏端列表滑動刪除插件hewenqi介紹
編輯：WEB前端代碼
hewenqi是一個javascript插件，應用於觸屏端，例如移動端觸屏手機，實現了列表滑動刪除功能。使用HTML5、JavaScript實現。文本末尾附有源代碼下載。
效果體驗：
http://hovertree.com/texiao/hewenqi/
請使用觸屏設備體驗效果。
或者掃描下面二維碼：
應用示例HTML代碼：
源碼下載：
http://hovertree.com/h/bjaf/tbdxdrfw.htm
效果體驗：
http://hovertree.com/texiao/hewenqi/
請使用觸屏設備體驗效果。
或者掃描下面二維碼：
應用示例HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">
<title>觸屏手機移動端側滑刪除插件Hewenqi _ 何問起</title><base target="_blank" />
<meta charset="utf-8" />
<link href="http://hovertree.com/texiao/hewenqi/hewenqi.css" rel="stylesheet" type="text/css" />
<style>
.hewenqihead * {
padding: 0;
margin: 0;
list-style: none;
}
header.hewenqihead {
background: #f7483b;
border-bottom: 1px solid #ccc;
}
header.hewenqihead h2 {
text-align: center;
line-height: 54px;
font-size: 16px;
color: #fff;
}
a{color:blue;}
</style>
<script src="http://hovertree.com/texiao/hewenqi/hewenqi.js"></script>
</head>
<body>
<header class="hewenqihead">
<h2>消息列表(hewenqi插件)</h2>
</header>
<ul id="hewenqi" class="hewenqi">
<li class="hewenqi-li">
<div class="hewenqi-con">
hewenqi插件是一個javascript插件。
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li id="li" class="hewenqi-li">
<div class="hewenqi-con">
官網：hovertree.com/texiao/hewenqi
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
應用於觸屏端的列表滑動刪除
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
請使用手機等觸屏設備體驗效果。
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
歡迎使用 HovertreeImg 圖片輪播插件
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
何問起，你的快遞到了，請到樓下簽收<a href="http://hovertree.com/">詳情</a>
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
HoverClock是一款jQuery網頁時鐘。
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
何問起你有一個到付快遞，請到門口查收。
</div>
<div class="hewenqi-btn">刪除</div>
</li>
<li class="hewenqi-li">
<div class="hewenqi-con">
給你寄來了一張賀卡，請到門口查收。
</div>
<div class="hewenqi-btn">刪除</div>
</li>
</ul>
<div style="text-align:center;">
<br />
體驗效果請使用手機掃描二維碼：<br />
<img src="https://www.divcss.online/divcssbuju/UploadFiles_7251/201612/2016122917333173.png" alt="二維碼" />
<br /> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/h/bjaf/rfsnyuyo.htm">說明</a>
</div>
<script>
$Hewenqi.Set({id:"hewenqi"});//指定ul的id，如果id為hewenqi的話可以屏蔽這條語句。
$Hewenqi.Hewenqi();//執行滑動刪除等功能。
</script>
</body>
</html>源碼下載：
http://hovertree.com/h/bjaf/tbdxdrfw.htm
- 上一頁:font-family中文字體示例
- 下一頁:html代碼規范
小編推薦
熱門推薦