淘宝网简易实现, Html + css + Javascript + Jquery +Swiper +Vue, 期末js大作业

首先上一张页面效果图, 下载地址往最下面翻

 本项目演示地址: 淘宝网-淘！我喜欢

项目亮点:

(相应代码)

• 导航栏的下拉动画, jQuery实现

$('#me').hover(
    function () {
        $('#me1').slideDown().fadeIn(200)
    },
    function () {
        $('#me1').slideUp().fadeOut(100)
    })

$('#folder').hover(
    function () {
        $('#folder1').slideDown().fadeIn(200)
    },
    function () {
        $('#folder1').slideUp().fadeOut(100)
    })

• 搜索框和按钮双向绑定(VUE实现) (其实就是复习一下vue的知识, 没有特别的)

搜索{{name}}

• 按钮放大缩小动画,jQuery实现

function toBig(item) {
    let i = $(item);
    i.animate({width: "+=14px", height: "+=5px"},'fast');
}

function toSmall(item) {
    let i = $(item);
    i.animate({width: "-=14px", height: "-=5px"},'fast');
}

• 悬浮加载侧边栏, 采用jQuery实现, 原理是在空的盒子里加载一个 html网页 

let left = document.getElementById('left-items');
let pageBox = document.getElementById('left-items-content'); //内容区域

left.onmouseover = function () {
    pageBox.style.display = 'block'
    pageBox.style.zIndex = "2";
    $(pageBox).load('left.html');
}

left.onmouseout = function () {
    pageBox.style.display = 'none'
}
pageBox.onmouseover = function () {
    pageBox.style.display = 'block'
}
pageBox.onmouseout = function () {
    pageBox.style.display = 'none'
}

• swiper和图片放大

    let swiper = new Swiper('.swiper', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项
        rewind: true,
        autoplay: {
            delay: 1500,
            disableOnInteraction: false,
        },

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })

#toBig1 img:hover{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out 0.2s;
    border-radius: 10px;
}
#toBig2 img:hover{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out 0.2s;
    border-radius: 10px;
}

• 项目里我最得意的动画, 偷师同学的(有点小多就不放出来了, 要看的项目自取)

•  跳转以及淘宝登录的静态页面(登录那个页面, 是基于淘宝的源码实现的)

源码下载地址 

mobeiCanyue/taobao: Imitation of taobao page (github.com)

 这个是我的一个期末大作业, 参考了若干项目

reference:

• GitHub - webbj97/web-demo-bj: 余光的前端demo，我会逐渐完善这个仓库，一起加油~

html的大体框架以及css都参考了这个项目的代码, 特此感谢

• https://download.csdn.net/download/weixin_43928989/11223285

参考了js部分的代码(swiper是自己实现的,实现过后才发现有这个项目, 当然了,不难), 以及左边的导航栏悬浮的网页html.