JQuery极果商城项目实战（附完整代码）

最新推荐文章于 2024-08-01 11:06:07 发布

置顶 Y_qilin_

最新推荐文章于 2024-08-01 11:06:07 发布

阅读量5.2k

点赞数 13

分类专栏： JQuery 文章标签： jquery javascript css html

本文链接：https://blog.csdn.net/Y_qilin_/article/details/109635695

版权

JQuery 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

JQuery极果商城前端页面

效果图
技术点
HTML页面结构
CSS
JavaScript
- JQuery
- json

效果图

在这里插入图片描述

技术点

本次项目实战尽可能的动态还原了极果商城的首页部分，使用到的前端知识包括HTML+CSS页面布局、元素浮动与清除浮动、轮播图的动画逻辑、Ajax异步请求数据、json数据编写

HTML页面结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2102123_gy13m3mq93k.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="head-top">
            <div class="inner">
                <div class="logo">
                    <h1><a href="index.html">极果</a></h1>
                </div>
                <div class="nav">
                    <ul>
                        <li class="active"><a href="index.html">首页</a></li>
                        <li><a href="#">酷玩</a></li>
                        <li><a href="#">导购</a></li>
                        <li><a href="#">试用</a></li>
                        <li><a href="#">报告</a></li>
                    </ul>
                </div>
                <a href="login.html" class="login">注册</a>
                <span class="search">
                    <i class="icon iconfont icon-fangdajing1"></i>
                </span>
            </div>
        </div>
        <div class="banner">
            <div class="inner">
                <h2>幻响小贝HIFI2.1音箱</h2>
                <p class="label">
                    <span>123人申请</span>
                    <span>￥500</span>
                    <span>20台</span>
                </p>
                <p class="time">申请时间剩余：13天5小时37分钟</p>
                <a href="#" class="btn">立即申请</a>
            </div>
        </div>

    </header>

    <main>
        <div class="hot-box">
            <div class="inner">
                <h2 class="title">热门试用</h2>
                <div class="slide-box">
                    <a href="javascript:void(0)" class="prev"></a>
                    <a href="javascript:void(0)" class="next"></a>
                    <div class="hot">
                        <ul>
                            <li class="item1">
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot1.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip ty">体验师专享</span>
                                    <img src="./img/hot2.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="green">2000</span>
                                        <span class="green">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current green">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot3.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con" style="margin-right: 0;">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot4.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                            </li>
                            <li class="item2">
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot5.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip ty">体验师专享</span>
                                    <img src="./img/hot6.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="green">2000</span>
                                        <span class="green">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current green">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot6.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con" style="margin-right: 0;">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot8.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                            </li>
                            <li class="item3">
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot9.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip ty">体验师专享</span>
                                    <img src="./img/hot10.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="green">2000</span>
                                        <span class="green">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current green">剩余时间2天</p>
                                </a>
                                <a href="#" class="con">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot11.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                                <a href="#" class="con" style="margin-right: 0;">
                                    <span class="top-tip sf">首发</span>
                                    <img src="./img/hot12.jpg" alt="">
                                    <h2 class="name">巴慕达 The Toaster 烤面包机</h2>
                                    <p class="label">
                                        <span class="red">2000</span>
                                        <span class="red">20台</span>
                                    </p>
                                    <p class="sq"><span class="red">4312</span><span>申请</span></p>
                                    <p class="current red">剩余时间2天</p>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="report-box common">
            <div class="inner">
                <h2 class="title">
                    报道精选
                </h2>
                <a href="#" class="more">查看更多</a>
                <i class="icon iconfont icon-caidanlan"></i>
                <ul>
                    <li>
                        <img src="./img/bg1.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg2.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg3.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg4.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg5.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg6.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg7.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">*苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg8.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="guide common">
            <div class="inner">
                <h2 class="title">
                    导购精选
                </h2>
                <a href="#" class="more">查看更多</a>
                <i class="icon iconfont icon-caidanlan"></i>
                <ul>
                    <li>
                        <img src="./img/bg1.jpg" alt="">
                        <div class="info list">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg2.jpg" alt="">
                        <div class="info list">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg3.jpg" alt="">
                        <div class="info list">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg4.jpg" alt="">
                        <div class="info list">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="fx-box common">
            <div class="inner">
                <h2 class="title">
                    发现酷玩
                </h2>
                <a href="#" class="more">查看更多</a>
                <i class="icon iconfont icon-caidanlan"></i>
                <ul>
                    <li>
                        <img src="./img/bg1.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg2.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg3.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg4.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg5.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg6.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg7.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg8.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left nick">苏苏</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg1.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg2.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg3.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg4.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg5.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg6.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg7.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                    <li>
                        <img src="./img/bg8.jpg" alt="">
                        <div class="info">
                            <p class="name">空气净化器里面学问多的惊呆你，你选对了码?</p>
                            <div class="fix">
                                <span class="left price">￥1200</span>
                                <p class="right">
                                    <span class="xin">3</span>
                                    <span class="look">3</span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="more-button">
                    <a href="javascript:void(0)" class="comMore cl">点击加载更多</a>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="down-box">
            <div class="inner">
                <div class="fix">
                    <dl>
                        <img src="./img/code.png" alt="" width="160" height="160">
                    </dl>
                    <dl>
                        <dt>
                            <img src="./img/logoImg.jpg" alt="">
                        </dt>
                        <dd>全球酷玩导购试用平台<br>酷.新奇.好玩.品质</dd>
                        <dd style="margin-top: 13px;">微信添加"jguojguo"<br>获取我们的服务</dd>
                    </dl>
                    <dl>
                        <dt>免费试用</dt>
                        <dd>试用流程</dd>
                        <dd>如何提高成功率</dd>
                    </dl>
                    <dl>
                        <dt>友情链接</dt>
                        <dd>
                            <a href="#">智东西</a>
                            <a href="#">WEIBUSI</a>
                        </dd>
                        <dd>
                            <a href="#">搜狐IT</a>
                            <a href="#">腾讯科技</a>
                        </dd>
                        <dd>
                            <a href="#">搜狐数码</a>
                            <a href="#">凤凰科技</a>
                        </dd>
                        <dd>
                            <a href="#">凤凰数码</a>
                            <a href="#">PConline</a>
                        </dd>
                        <dd>
                            <a href="#">泡泡网</a>
                            <a href="#">3W咖啡</a>
                        </dd>
                        <dd>
                            <a href="#">ZUK社区</a>
                            <a href="#">亿觅emie</a>
                        </dd>
                        <dd>
                            <a href="#">极客公园</a>
                            <a href="#">易迅意启航</a>
                        </dd>
                        <dd>
                            <a href="#">果库</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>购买攻略</dt>
                        <dd><a href="#">美亚海淘教程</a></dd>
                        <dd><a href="#">日亚海淘教程</a></dd>
                        <dd><a href="#">海淘转运攻略</a></dd>
                        <dd><a href="#">kickstarter 众筹购买攻略</a></dd>
                        <dd><a href="#">indiegogo 众筹购买攻略</a></dd>
                    </dl>
                    <dl>
                        <dt>厂商合作</dt>
                        <dd><a href="#">关于极果</a></dd>
                        <dd><a href="#">联系我们</a></dd>
                        <dd><a href="#">商务合作：BD@jiguo.com</a></dd>
                        <dd><a href="#">CEO邮箱：CEO@jiguo.com</a></dd>
                    </dl>
                    <dl></dl>
                </div>
            </div>
        </div>
    </footer>

    <a href="javascript:void(0)" id="backTop"></a>
</body>
</html>

CSS

reset.css

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, /* structural elements 结构元素 */
dl,dt,dd,ul,ol,li, /*list elements 列表元素*/
pre, /*text formatting elements 文本格式元素*/
fieldset,button,input,textarea, /*form elements 表单元素*/
th,td { /*table elements 表格元素*/
    margin: 0;
    padding: 0;
}

body,
button, input, select, textarea{ /*for ie*/
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /*用ASCII码表示*/
}

h1{font-size: 18px;}
h2{font-size: 16px;}
h3{font-size: 14px;}
h4, h5, h6{font-size: 100%;}

address, cite, dfn, em, var{font-style: normal;}/*将斜体扶正*/
code, kbd, pre, samp, tt{font-family: 'Courier New', Courier, monospace;}
small{font-size: 12px;} /*让small的字号正常*/

/* 重置列表元素 */
ul, ol{list-style: none;}

/* 重置文本格式元素 */
a{text-decoration: none;}
/* a:hover{text-decoration: underline;} */

abbr[title], acronym[title]{
    border-bottom: 1px dotted;
    cursor: help;
}

q:before, q:after{content: "";}

/* 重置表单元素 */
legend{color: #000000;}
fieldset, img{border: none;}

button, input, select, textarea{
    font-size: 100%;
}

/* 重置表格元素 */
table{
    border-collapse: collapse;
    border-spacing: 0;
}

/* 重置hr */
hr{
    border: none;
    height: 1px;
}

/* 让非IE浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html{vertical-align: scroll;}

common.css

@keyframes fade{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@-webkit-keyframes fade{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@-moz-keyframes fade{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}
@-ms-keyframes fade{
    0%{
        opacity: 1;
    }
    50%{
        opacity: 0.5;
    }
    100%{
        opacity: 1;
    }
}



header,main,footer{
    width: 100%;
}
header{
    overflow: hidden;
}
.inner{
    width: 1002px;
    margin: 0 auto;
}
header .head-top{
    width: 100%;
    height: 74px;
    background-color: #ffffff;
}
.head-top .inner{
    height: 74px;
}
.head-top .inner .logo{
    width: 134px;
    height: 74px;
    float: left;
    background-color: #ffffff;
}
.head-top .inner .logo:hover{
    animation: fade 1s linear infinite;
}
.head-top .inner .logo h1{
    width: 134px;
    height: 74px;
    background-image: url(../img/logo_02.png);
}
.head-top .inner .logo h1 a{
    display: block;
    width: 134px;
    height: 74px;
    text-indent: -3000px;
}
.head-top .inner .nav{
    width: 400px;
    height: 74px;
    float: left;
    margin-left: 65px;
    background-color: #ffffff;
}
.head-top .inner .nav ul li{
    float: left;
    padding-top: 34px;
    margin-right: 50px;
    font-size: 20px;
}
.head-top .inner .nav ul li:last-child{
    margin-right: 0;
}
.head-top .inner .nav ul li a{
    color: #000000;
}
.head-top .inner .nav ul .active a{
    color: #ff3a35;
}
.head-top .inner .nav ul li a:hover{
    color: #ff3a35;
    text-decoration: none;
}
.search .icon{
    float: right;
    margin-top: 25px;
    margin-right: 34px;
    font-size: 25px;
    cursor: pointer;
    transition: all .1s linear;
}
.search .icon:hover{
    font-size: 28px;
}
.login{
    float: right;
    display: block;
    width: 50px;
    height: 30px;
    border: 1px solid #fa553f;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    border-radius: 2px;
    color: #fa553f;
    margin-top: 21px;
}
.login:hover{
    background-color: #fa553f;
    color: #ffffff;
}
main{
    overflow: hidden;
}
.con{
    width: 220px;
    height: 285px;
    display: block;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    float: left;
    margin-right: 40px;
}
.con img{
    width: 220px;
    height: 135px;
}
.con .top-tip{
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 8px;
    border-radius: 0 0 0 6px;
    z-index: 10;
}
.con .sf{
    background-color: red;
    color: white;
}
.con .ty{
    background-color: #f7f2ca;
    color: #cdc295;
}
.con .name{
    padding: 8px;
    text-align: center;
    color: #000000;
}
.con img:hover{
    animation: fade 2s linear infinite;
}
.con .label{
    text-align: center;
}
.con .label span{
    display: inline-block;
    padding: 6px 10px;
    border-radius: 4px;
}
.con .red{
    color: red;
}
.con .label .red{
    color: red;
    border: 1px solid red;
}
.con .label .green{
    color: green;
    border: 1px solid green;
}
.con .green{
    color: green;
}
.con .sq{
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
}
.con .current{
    text-align: center;
    font-size: 18px;
}
.common ul{
    overflow: hidden;
}
.common ul li{
    width: 222px;
    height: 233px;
    float: left;
    margin: 0 34px 20px 0;
    border-radius: 6px;
    background-color: white;
    border: 1px solid #ccc;
}
.common img{
    width: 222px;
    height: 130px;
    border-radius: 6px;
}
.common ul li:nth-child(4n+4){
    margin-right: 0;
}
.common ul li .info{
    padding: 10px;
    height: 98px;
}
.common ul li .list{
    background: url(../img/listbg.jpg) no-repeat left bottom;
}
.common ul li .info .name{
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
}
.common ul li .info .left{
    float: left;
}
.common ul li .info .price{
    color: red;
}
.common ul li .info .right{
    float: right;
}
.common ul li .info .right span{
    padding-left: 15px;
    color: #999;
}
.common ul li .info .right .xin{
    background: url(../img/xin.png) no-repeat left center;
}
.common ul li .info .right .look{
    background: url(../img/reply.png) no-repeat left center;
}
.common .more-button{
    text-align: center;
    padding-bottom: 20px;
}
.common .more-button .comMore{
    color: red;
    padding-left: 20px;
}
.common .more-button .cl{
    background: url(../img/more.png) no-repeat center left;
}
.common .more-button .loading{
    background: url(../img/loading-icon.gif) no-repeat center left;
}
.common .more-button .no-more{
    color: #cccccc;
}
footer{
    height: 360px;
    background-color: #505050;
}
footer .down-box{
    padding: 40px 0 15px;
}
footer .down-box dl:first-child{
    padding-left: 0;
}
footer .down-box dl{
    float: left;
    padding-left: 40px;
}
footer .down-box dl:nth-child(4) a{
    display: inline-block;
    width: 69px;
}
footer .down-box dl dt{
    color: #ffffff;
    font-size: 16px;
    padding-bottom: 25px;
}
footer .down-box dl dd{
    color: #a3a3a3;
    text-align: left;
    line-height: 20px;
}
footer .down-box dl dd a{
    color: #a3a3a3;
}

index.css

@keyframes rotateIn{
    0%{
        transform: translate(800px,-800px);
    }
    100%{
        transform: translate(0,0);
    }
}
@-webkit-keyframes rotateIn{
    0%{
        transform: translate(800px,-800px);
    }
    100%{
        transform: translate(0,0);
    }
}
@-moz-keyframes rotateIn{
    0%{
        transform: translate(800px,-800px);
    }
    100%{
        transform: translate(0,0);
    }
}
@-ms-keyframes rotateIn{
    0%{
        transform: translate(800px,-800px);
    }
    100%{
        transform: translate(0,0);
    }
}


header .banner{
    width: 100%;
    height: 300px;
    border-bottom: 1px solid #d4cec2;
    box-shadow: 0px 0px 5px #cecfcf inside;
    background: url(../img/original.jpg)center top;
}
header .banner .inner{
    height: 254px;
    padding-top: 46px;
    text-align: right;
    animation: rotateIn 1s;
}
header .banner .inner h2{
    font-size: 34px;
    margin-bottom: 15px;
    color: white;
}
header .banner .inner .label{
    margin-bottom: 22px;
}
header .banner .inner .label span{
    display: inline-block;
    padding: 10px;
    background-color: rgba(255,255,255,0.2);
    margin-right: 14px;
    border-radius: 2px;
    color: white;
}
header .banner .inner .time{
    color: white;
    font-size: 18px;
    margin-bottom: 20px;
}
header .banner .inner .btn{
    display: inline-block;
    width: 240px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: white;
    background-color: #fe5341;
    font-size: 24px;
}
main .hot-box{
    width: 100%;
    height: 380px;
}
main .hot-box .inner{
    height: 380px;
}
main .inner .title{
    height: 70px;
    line-height: 70px;
    font-size: 24px;
}
main .hot-box .inner .slide-box{
    height: 288px;
    width: 100%;
    position: relative;
}
main .hot-box .inner .slide-box .prev,
main .hot-box .inner .slide-box .next{
    display: block;
    width: 37px;
    height: 78px;
    position: absolute;
    top: 120px;
}
main .hot-box .inner .slide-box .prev{
    background: url(../img/prev.png);
    left: -60px;
}
main .hot-box .inner .slide-box .next{
    background: url(../img/next.png);
    right: -60px;
}
main .hot-box .inner .slide-box .hot{
    width: 100%;
    height: 288px;
    overflow: hidden;
}
main .hot-box .inner .slide-box ul{
    width: 3006px;
    height: 288px;
    position: relative;
    /* margin-left: -1002px; */
}
main .hot-box .inner .slide-box ul li{
    width: 1002px;
    height: 288px;
    float: left;
}
main .report-box{
    width: 100%;
    height: 590px;
    background-color: #dddddd;
}
main .report-box .inner{
    height: 590px;
}
main .inner{
    position: relative;
}
main .inner .more{
    position: absolute;
    top: 28px;
    right: 18px;
    color: red;
}
main .inner .icon{
    position: absolute;
    top: 26px;
    right: 0;
    color: red;
    cursor: pointer;
}
main .guide{
    height: 380px;
}
main .guide .inner{
    height: 380px;
}
main .fx-box{
    overflow: hidden;
    width: 100%;
    background-color: #dddddd;
}

#backTop{
    display: none;
    width: 50px;
    height: 50px;
    background: #cccccc url(../img/back.png) no-repeat center center;
    position: fixed;
    right: 100px;
    top: 600px;
    transition: all .2s linear;
    border-radius: 4px;
}
#backTop:hover{
    background: #999999 url(../img/back.png) no-repeat center center;
}

JavaScript

JQuery

// 面向过程

$(function() {
    var slide={
        stop:true,//控制是否继续执行
        animate:false,//判断是否执行动画
        prevEvent:function(){
            var prev=$(".prev")
            prev.click(function() {
                var ul = $(".hot ul");
                if(slide.animate) return;
                slide.animate=true;
                // 现将最后一个li放到首位
                ul.find("li").last().prependTo(ul)
                // 在将首位li隐藏
                ul.css("left","-1002px")
                ul.animate({
                    left:0
                },800,function() {
                    slide.animate=false;
                })
                
            })
        },
        nextEvent:function() {
            var next=$(".next")
            next.click(function() {
                var ul = $(".hot ul");
                if(slide.animate) return;
                slide.animate=true;
                ul.animate({
                    left: "-1002px"
                },800,function() {
                    // 将移走的第一个li移动到ul的后面
                    ul.find("li").eq(0).appendTo(ul)
                    // 再将原本已经移动过的ul还原
                    ul.css("left",0);
                    slide.animate=false;
                })
                
            })
        },
        init:function() {
            setInterval(function() {
                if(slide.stop) return;
                if(slide.animate) return;
                slide.animate=true;
                var ul = $(".hot ul");
                ul.animate({
                    left: "-1002px"
                },800,function() {
                    // 将移走的第一个li移动到ul的后面
                    ul.find("li").eq(0).appendTo(ul)
                    // 再将原本已经移动过的ul还原
                    ul.css("left",0);
                    slide.animate=false;
                }) 
            },2000)

            $(".slide-box").mouseover(function() {
                slide.stop=true;
            })
            $(".slide-box").mouseout(function() {
                slide.stop=false;
            })
            this.prevEvent();//添加翻页功能
            this.nextEvent();
        }
    }
    slide.init();

    
    //ajax请求数据
    var indexNum = 0;//统计当前请求次数
    $(".comMore").click(function() {
        var self = $(this);
        self.html("正在加载...").removeClass("cl").addClass("loading");
        $.ajax({
            type:"post",
            url:"json/json.js",
            dataType:"json",
            success:function(data) {
                var data1 = data[indexNum];
                var param = "";
                for(var i = 0; i < data1.length; i ++) {
                    param += '<li><img src="'+data1[i].img+'" widt"222" height="130"><div class="info"><p class="name">'+data1[i].text+'</p><div class="fix"><span class="left price">'+data1[i].price+'</span><p class="right"><span class="xin">3</span><span class="look">3</span></p></div></div></li>'

                }
                self.parent().prev().append(param);
                indexNum++
                self.html("点击加载更多").removeClass("loading").addClass("cl");
                if(indexNum >= data.length) {
                    self.parent().html("<span class='no-more'>没有更多</span>");
                }
            }
        })
    })

    //返回顶部按钮
    $(window).scroll(function() {
        if($(window).scrollTop()>100) {
            $("#backTop").show();
        }else{
            $("#backTop").hide();
        }
    })
    $("#backTop").click(function() {
        $("html,body").animate({
            scrollTop:0
        },800)
    })
})

json

[
    [
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"},
        {"img":"img/kuwan01.jpg","text":"索尼 FDR-AXPSS 摄像机","price":"￥499"}
    ],
    [
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"},
        {"img":"img/kuwan02.jpg","text":"三星 HW-K950 家庭影院","price":"￥1247"}
    ],
    [
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"},
        {"img":"img/kuwan03.jpg","text":"FOSSIL Q45 Pilot 智能手表","price":"￥3453"}
    ],
    [
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"},
        {"img":"img/kuwan04.jpg","text":"轻客 TF01 电单车：可折叠 智能变速","price":"￥12343"}
    ]
]

Y_qilin_

关注

13
点赞
踩
83

收藏

觉得还不错? 一键收藏
2
评论
JQuery极果商城项目实战（附完整代码）

JQuery极果商城前端页面效果图技术点HTML页面结构CSSreset.csscommon.cssindex.cssJavaScriptJQueryjson效果图技术点本次项目实战尽可能的动态还原了极果商城的首页部分，使用到的前端知识包括HTML+CSS页面布局、元素浮动与清除浮动、轮播图的动画逻辑、Ajax异步请求数据、json数据编写HTML页面结构<!DOCTYPE html><html lang="en"><head> <meta
复制链接

扫一扫