jQuery+HTML5加入購(gòu)物車代碼分享
這是一款基于jquery+html5實(shí)現(xiàn)的支持累加計(jì)價(jià)的網(wǎng)站購(gòu)物車代碼,可以把貨物添加到購(gòu)物車,添加物品數(shù)量,如果想取消購(gòu)置某物品,這個(gè)功能也是可以實(shí)現(xiàn)的。
運(yùn)行效果圖:-----------------------------------查看效果-----------------------------------
為大家分享的jQuery+HTML5加入購(gòu)物車代碼如下
<head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>jQuery+HTML5加入購(gòu)物車代碼</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" > <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="ct-pageWrapper"> <main> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="widget"> <h2 class="widget-header">購(gòu)物車</h2> <div class="ct-cart"></div> </div> </div> <div class="col-md-9"> <div class="row"> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-01.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Box of macaroons</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$19.99</span> </div> </div> </div> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-02.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Cherry Straws</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$34.99</span> </div> </div> </div> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-03.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Coffee Macaroons</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$59.99</span> </div> </div> </div> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-04.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Finetti ones</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$9.99</span> </div> </div> </div> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-05.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Minty duo</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$3.99</span> </div> </div> </div> <div class="col-sm-4"> <div class="ct-product"> <div class="image"><img src="images/product-06.jpg" alt=""></div> <div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a> <h2 class="ct-product-title">Pistachio</h2> <p class="ct-product-description">A very delicious macaroons ...</p><span class="ct-product-price">$13.99</span> </div> </div> </div> </div> </div> </div> </div> </main> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/shop.min.js"></script> <script> $('body').ctshop({ currency: '$', paypal: { currency_code: 'EUR' } }); </script> </div> <div style="text-align:center;margin:-50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> </div> </body> </html>
以上就是分享的jQuery+HTML5加入購(gòu)物車代碼,希望大家可以喜歡。
- jQuery實(shí)現(xiàn)購(gòu)物車多物品數(shù)量的加減+總價(jià)計(jì)算
- jQuery實(shí)現(xiàn)加入購(gòu)物車飛入動(dòng)畫效果
- JQuery實(shí)現(xiàn)的購(gòu)物車功能(可以減少或者添加商品并自動(dòng)計(jì)算價(jià)格)
- jQuery實(shí)現(xiàn)購(gòu)物車計(jì)算價(jià)格功能的方法
- 純jquery實(shí)現(xiàn)模仿淘寶購(gòu)物車結(jié)算
- 基于JQuery實(shí)現(xiàn)的類似購(gòu)物商城的購(gòu)物車
- jQuery實(shí)現(xiàn)購(gòu)物車數(shù)字加減效果
- jquery實(shí)現(xiàn)購(gòu)物車基本功能
- jquery購(gòu)物車結(jié)算功能實(shí)現(xiàn)方法
- jQuery實(shí)現(xiàn)購(gòu)物車
相關(guān)文章
jquery isEmptyObject判斷是否為空對(duì)象的函數(shù)
jQuery 判斷一個(gè)對(duì)象是否為空是使用for name in obj 來(lái)遍歷對(duì)象中的屬性名.2011-02-02jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法
下面小編就為大家分享一篇jquery動(dòng)態(tài)添加以及遍歷option并獲取特定樣式名稱的option方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01jquery實(shí)現(xiàn)的導(dǎo)航固定效果
這篇文章主要介紹了jquery實(shí)現(xiàn)的導(dǎo)航固定效果,需要的朋友可以參考下2014-04-04jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)購(gòu)物車出現(xiàn)下拉框代碼(推薦)
在做web前端項(xiàng)目開發(fā)的時(shí)候,使用jquery庫(kù)的感觸頗多,下面小編通過(guò)寫購(gòu)物車的下拉框做法,把我的想法給大家分享一下,感興趣的朋友可以參考下2016-07-07jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序示例
這篇文章主要介紹了jQuery+ajax讀取json數(shù)據(jù)并按照價(jià)格排序,涉及jQuery基于ajax動(dòng)態(tài)獲取json文件數(shù)據(jù)并進(jìn)行數(shù)據(jù)遍歷與排序的相關(guān)操作技巧,需要的朋友可以參考下2018-03-03jQuery點(diǎn)擊頁(yè)面其他部分隱藏下拉菜單功能
這篇文章主要介紹了jQuery點(diǎn)擊頁(yè)面其他部分隱藏下拉菜單功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11網(wǎng)頁(yè)下載文件期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作
網(wǎng)頁(yè)下載文件時(shí)需要一段時(shí)間,在這期間如何防止用戶對(duì)網(wǎng)頁(yè)進(jìn)行其他操作,將div覆蓋在網(wǎng)頁(yè)上,將網(wǎng)頁(yè)鎖住,具體實(shí)現(xiàn)如下2014-06-06