JS實現移動端購物車左滑刪除功能

1

doctype html
>
2<
html
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
>
6<
title
>js側滑顯示刪除按鈕
title
>
7<
style
>8*
9body
10li11i
12a13.list
14.list li
15.list li a
16.list li i
17.swipeleft
18style
>
19<
script
>
20//
計算根節點html的字型大小
21function
resizeroot()
28document.documentelement.style.fontsize 
=devicewidth 
/num1 +"
px";29
}30//根節點html的字型大小初始化
31resizeroot();
3233
window.onresize 
=function
();36
script
>
37head
>
38<
body
>
39<
section
>
40<
div 
class
="list"
>
41<
ul>
42<
li><
a href
="#"
>側滑顯示刪除按鈕1<
i>刪除
i>
a>
li>
43<
li><
a href
="#"
>側滑顯示刪除按鈕2<
i>刪除
i>
a>
li>
44<
li><
a href
="#"
>側滑顯示刪除按鈕3<
i>刪除
i>
a>
li>
45ul
>
46div
>
47<
script
>
48//
側滑顯示刪除按鈕
49var
expansion 
=null
; //
是否存在展開的list
50var
container 
=document.queryselectorall(
'.list li a');
51for
(vari =
0; i 
<
container.length; i
++)        
61});
62container[i].addeventlistener(
'touchmove', 
function
(event)
74if
(x -
x >10)
79swipey 
=false;80
}81//上下滑動
82if
(swipey 
&&math.abs(x 
-x) 
-math.abs(y 
-y) 
<
0)         
85});86}
87script
>
88body
>
89html
>

移動自適應

1

在實現的過程中，要注意父元素和子元素的一些樣式，比如在父元素中設定box-sizing: border-box; 可以減少一些問題。

教程**處：

jQuery實現移動端左滑刪除功能

這裡，我們可以直接使用jquery來實現該效果。基本原理 完整的示例 如下 charset utf 8 移動端左滑刪除 右滑恢復效果title src script html body,div,p,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset...

JS實現的購物車

hoppingcart jscript 檔案 read cookie function getcookie cookiename result unescape mycookie.substring start,end return result write cookie function setc...

js購物車的實現

購物車 在 類專案中，購物車是非常常見的，但購物車該怎麼實現呢？很多講購物車都是用html頁面模擬的靜態資料，這種資料沒有靈活性，正常的 思路應該是 根據使用者的id查詢出使用者的購物車中的商品，然後對使用者購物車商品進行遍歷，本文章就是對遍歷出來的商品進行購物車數量的加減和小計 總計之間的計算。遍...