基于jQuery+HTML5加入购物车代码

基于jQuery+HTML5加入购物车代码。这是一款基于jquery+html5实现的支持累加计价的网站购物车代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div class="ct-pageWrapper">
        <main>
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="widget">
                            <h2 class="widget-header">购物车</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>

via:http://www.w2bc.com/article/50566

时间: 2024-11-03 22:25:34

基于jQuery+HTML5加入购物车代码的相关文章

基于jQuery HTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码.这是一款支持选择颜色跟样式的添加购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header> <h1>Quick Add to Cart</h1> </header> <a href="#0" class="cd-cart"> <span>0</span> </a> <ul class

基于jQuery表格增加删除代码

基于jQuery表格增加删除代码是一款动态增加删减表格行特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width:720px;margin:20px auto;"> <table id="tab11" style="display: none"> <tbody> <tr> <td height="30" align=&

基于jquery下拉列表树插件代码

分享一款基于jquery下拉列表树插件代码.这是一款实用的jquery 树形下拉框 下拉树代码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <table width="100%" align="center" cellpadding="0" cellspacing="0"> <tr> <td colspan="1" bgcolor="#FF

基于jQuery实现滚动新闻代码下载

分享一款基于jQuery实现滚动新闻代码下载.这是一款基于bootstrup 3实现的响应式jQuery滚动新闻插件.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <header class="htmleaf-header bgcolor-10"> <h1>基于jQuery实现滚动新闻代码下载</h1> </header>

jQuery+html5实现的3D动态切换焦点轮播幻灯片

今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.横向全屏显示,效果图如下: 在线预览   源码下载 实现的代码. 该幻灯片基于jquery,所以要引用jquery库,另个还有两个js库分别是html5zoo.js和lovelygallery.js.这些js在实例下

基于jQuery页面窗口拖动预览效果

今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <p> minimap - A jQuery Plugin<br> A preview of full webpage or its DOM element with flexible

基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转)

效果图:http://code.google.com/p/jquery-placeholder-js/ 演示代码:http://demo.jb51.net/js/2011/jqueryplaceholder/打包下载:http://xiazai.jb51.net/201105/yuanma/jqueryplaceholder.rar 基于jQuery的让非HTML5浏览器支持placeholder属性的代码(转),布布扣,bubuko.com

基于jquery右侧悬浮加入购物车代码

分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制--> <div class="main"> <div id="plist"> <ul> <li> <div class="lh_wrap"> <div class="

10款web前端基于jquery的页面代码

1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 在线演示 源码下载 2.基于jQuery的图片上下左右无缝连续循环滚动 imgscroll插件是一款支持图片焦点滚动(支持渐变和滚动),图片连续无缝循环滚动的js库,依赖于jQuery图片无缝连续循环滚动 支持上下左右的滚动. 在线演示 源码下载 3.jquery实现的fixed固定层时间轴动态效果 jquery实现的fixed固定层时间轴动态效果源码,