微学网

热门关键词:   as  thinkphp  ecshop  xxx  php分页  商务通
热门: ASP.NET PHP编程 ASP编程 JSP编程 Python

Jquery开发电商网站实战(带源码)

发布时间:2020-03-11 来源:未知 点击:

组件化思想,包含:

下拉菜单项封装 + 按需加载

搜索功能组件化,显示数据 + 下拉显示 + 缓存

分类导航按需加载

幻灯片效果组件封装及按需加载

商品楼层模块组件化 + 商品数据按需加载 + Tab选项卡 + 电梯结构

是时候放出大长图了!!!

 

 

index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/common.css" />
    <link rel="stylesheet" href="css/index.css" />
</head>

<body>
    <!-- 站点导航开始 -->
    <div class="nav-site">
        <div class="container">
            <ul class="fl">
                <li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲,请登录</a></li>
                <li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
                <li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛XX网</a></li>
            </ul>
            <ul class="fr">
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link  transition">我的XX<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
                    </ul>
                </li>
                <li class="menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
                        <li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
                    </ul>
                </li>
                <li class="fl">
                    <a href="###" target="_blank" class="nav-site-category link">商品分类</a>
                </li>
                <li class="menu dropdown fl" data-active="menu" data-load="js/dropdown-seller.json">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-left">
                        <li class="dropdown-loading"></li>
                    </ul>
                </li>
                <li class="nav-site-service menu dropdown fl" data-active="menu">
                    <a href="###" target="_blank" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow icon transition">&#xe609;</i></a>
                    <ul class="dropdown-layer dropdown-right">
                        <li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
                        <li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 站点导航结束 -->
    <!-- header区开始 -->
    <div class="header">
        <div class="container">
            <h1 class="fl"><a href="./index.html" class="header-logo text-hidden">XX网</a></h1>
            <div id="header-search" class="search fl">
                <form action="https://s.taobao.com/search" class="search-form">
                    <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
                    <input type="submit" value="搜索" class="search-btn btn fl" />
                </form>
                <ul class="search-layer">
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                    <li class="search-layer-item text-ellipsis">111</li>
                </ul>
            </div>
            
        </div>
    </div>
    <!-- header区开始 -->
    <!-- 中心部分导航 -->
    <div class="nav-main">
        <div class="container">
            <a href="###" target="_blank" class="link">数码城</a
            ><a href="###" target="_blank" class="link">天黑黑</a
            ><a href="###" target="_blank" class="link">团购</a
            ><a href="###" target="_blank" class="link">发现</a
            ><a href="###" target="_blank" class="link">二手特价</a
            ><a href="###" target="_blank" class="link">名品汇</a>
        </div>
    </div>
    <div class="focus">
        <div class="container">
            <div id="focus-category" class="category fl">
                <a href="###" target="_blank" class="category-title"><i class="icon">&#xe608;</i>商品分类</a>
                <ul class="category-list">
                    <li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家用电器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-2.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">手机</a
                            ><a href="###" target="_blank" class="dropdown-link">运营商</a
                            ><a href="###" target="_blank" class="dropdown-link">数码</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">电脑</a
                            ><a href="###" target="_blank" class="dropdown-link">办公</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">家居</a
                            ><a href="###" target="_blank" class="dropdown-link">家具</a
                            ><a href="###" target="_blank" class="dropdown-link">家装</a
                            ><a href="###" target="_blank" class="dropdown-link">厨具</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">男装</a
                            ><a href="###" target="_blank" class="dropdown-link">女装</a
                            ><a href="###" target="_blank" class="dropdown-link">童装</a
                            ><a href="###" target="_blank" class="dropdown-link">内衣</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">化妆</a
                            ><a href="###" target="_blank" class="dropdown-link">清洁</a
                            ><a href="###" target="_blank" class="dropdown-link">宠物</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">运动户外</a
                            ><a href="###" target="_blank" class="dropdown-link">钟表</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">汽车</a
                            ><a href="###" target="_blank" class="dropdown-link">汽车用品</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">母婴</a
                            ><a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">食品</a
                            ><a href="###" target="_blank" class="dropdown-link">酒类</a
                            ><a href="###" target="_blank" class="dropdown-link">生鲜</a
                            ><a href="###" target="_blank" class="dropdown-link">特产</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">医药保健</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">图书</a
                            ><a href="###" target="_blank" class="dropdown-link">音像</a
                            ><a href="###" target="_blank" class="dropdown-link">电子书</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">彩票</a
                            ><a href="###" target="_blank" class="dropdown-link">旅行</a
                            ><a href="###" target="_blank" class="dropdown-link">充值</a
                            ><a href="###" target="_blank" class="dropdown-link">票务</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                    <li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
                        <div class="dropdown-toggle">
                            <a href="###" target="_blank" class="dropdown-link">理财</a
                            ><a href="###" target="_blank" class="dropdown-link">众筹</a
                            ><a href="###" target="_blank" class="dropdown-link">白条</a
                            ><a href="###" target="_blank" class="dropdown-link">保险</a>
                            <i class="dropdown-arrow">&gt;</i>
                        </div>
                        <div class="dropdown-layer">
                            <div class="dropdown-loading"></div>
                        </div>
                    </li>
                </ul>
            </div>
            <div id="focus-slider" class="slider fl">
                <div class="slider-container">
                    <div class="slider-item">
                        <!-- <a href="###" target="_blank"><img src="../img/focus-slider/loading.gif" data-src="https://gratisography.com/pictures/407_1.jpg" alt="" class="slider-img" /></a> -->
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/1.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/2.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/3.png" alt="" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank"><img src="img/focus-slider/loading.gif" data-src="img/focus-slider/4.png" alt="" class="slider-img" /></a>
                    </div>
                </div>
                <ol class="slider-indicator-wrap">
                    <li class="slider-indicator text-hidden fl">1</li>
                    <li class="slider-indicator text-hidden fl">2</li>
                    <li class="slider-indicator text-hidden fl">3</li>
                    <li class="slider-indicator text-hidden fl">4</li>
                </ol>
                <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
                <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
            </div>
            <div class="focus-sidebar fr">
                <div class="focus-news">
                    <div class="focus-news-head">
                        <h2 class="focus-news-title fl">XX快报</h2>
                        <a href="###" target="_blank" class="link fr">更多 &gt;</a>
                    </div>
                    <div class="focus-news-body">
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 精选图书每满150减50</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[公告]</strong> 因广州图书仓搬仓升级配送延迟</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 爆款手机12期免息</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[公告]</strong> 广东、福建受台风影响配送延迟</a>
                        </p>
                        <p class="text-ellipsis">
                            <a href="###" target="_blank" class="link"><strong>[特惠]</strong> 大闸蟹领券满399减180</a>
                        </p>
                    </div>
                </div>
                <div class="focus-service cf">
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe612;</i>
                        <span class="focus-service-text">话费</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe611;</i>
                        <span class="focus-service-text">机票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe607;</i>
                        <span class="focus-service-text">电影票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60e;</i>
                        <span class="focus-service-text">游戏</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe605;</i>
                        <span class="focus-service-text">彩票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe603;</i>
                        <span class="focus-service-text">加油卡</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe602;</i>
                        <span class="focus-service-text">酒店</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe601;</i>
                        <span class="focus-service-text">火车票</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60d;</i>
                        <span class="focus-service-text">众筹</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60c;</i>
                        <span class="focus-service-text">理财</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe610;</i>
                        <span class="focus-service-text">礼品卡</span>
                    </a>
                    <a href="###" target="_blank" class="focus-service-item fl">
                        <i class="icon focus-service-icon">&#xe60f;</i>
                        <span class="focus-service-text">白条</span>
                    </a>
                </div>
                <div class="focus-ad"></div>
            </div>
        </div>
    </div>

    <div class="todays">
        <div class="container">
            <div id="todays-slider" class="slider">
                <div class="slider-container">
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/1.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/2.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/4.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/6.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/8.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/10.png" class="slider-img" /></a>
                    </div>
                    <div class="slider-item">
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/11.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/3.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/5.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/7.png" class="slider-img" /></a>
                        <a href="###" target="_blank" class="fl"><img src="img/todays-slider/loading.gif" alt="" data-src="img/todays-slider/9.png" class="slider-img" /></a>
                    </div>
                </div>
                <a href="javascript:;" class="slider-control slider-control-left">&lt;</a>
                <a href="javascript:;" class="slider-control slider-control-right">&gt;</a>
            </div>
        </div>
    </div>

    <!-- floor-1 -->
    <div class="floor">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- floor2 -->
    <div class="floor">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- floor3 -->
    <div class="floor">
        <div class="container">
           <img src="img/floor-loading.gif" alt="" /> 
        </div>
    </div>

    <!-- floor4 -->
    <div class="floor">
        <div class="container">
         <img src="img/floor-loading.gif" alt="" />   
        </div>
    </div>

    <!-- floor5 -->
    <div class="floor floor-last">
        <div class="container">
            <img src="img/floor-loading.gif" alt="" />
        </div>
    </div>

    <!-- elevator -->
    <div id="elevator" class="elevator container">
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F1</span>
            <span class="elevator-text">服饰</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F2</span>
            <span class="elevator-text">美妆</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F3</span>
            <span class="elevator-text">手机</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F4</span>
            <span class="elevator-text">家电</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F5</span>
            <span class="elevator-text">数码</span>
        </a>
    </div>
   
    
    <div class="toolbar">
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe617;</i>
            <span class="toolbar-text transition">会员</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe613;</i>
            <span class="toolbar-text transition">购物车</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe616;</i>
            <span class="toolbar-text transition">我的关注</span>
        </a>
        <a href="javascript:;" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe614;</i>
            <span class="toolbar-text transition">我的消息</span>
        </a>
        <a href="javascript:;" id="backToTop" class="toolbar-item">
            <i class="toolbar-icon icon">&#xe615;</i>
            <span class="toolbar-text transition">顶部</span>
        </a>
    </div>
    <script>
    //两种判断是否有jquery库的写法:
    // window.jQuery || document.write('<script src="js/jquery.js"><' + '/script>')
    window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script>
    <script src="js/transition.js"></script>
    <script src="js/showhide.js"></script>
    <script src="js/dropdown.js"></script>
    <script src="js/search.js"></script>
    <script src="js/move.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/tab.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

这就是微学网-程序员之家为你提供的"Jquery开发电商网站实战(带源码)"希望对你有所帮助.本文来自网络,转载请注明出处:http://www.weixuecn.cn/article/9853.html

上一篇:Jquery实现挂号平台首页源码

下一篇:没有了

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 框架 | 微信公众号 | 小程序 | 服务器 | APP开发 |

凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 微学网 版权所有,并保留所有权利。 备案号:粤ICP备09051474号-1

电脑版 | 移动版