分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

项目实战---模拟站酷网站

发布时间:2023-09-06 02:26责任编辑:赖小花关键词:暂无标签

开发工具:WebStorm

涉及技术:HTML+CSS+JS+JQ+VUE+Element

项目描述:本项目是根据站酷(https://www.zcool.com.cn/)的布局样式/交互效果等作为依据模拟开发的一个实战项目;

     主要模拟开发了首页,发现,同城,登录,注册等页面;

     实现的效果主要有:

       导航条下拉菜单,图片轮播,图片无缝滚动,

       页面数据用vue动态渲染,监听页面滚动实现导航条吸顶,

       点击换一换实现内容切换,基于Element组件实现内容分页,表单验证等;

项目总结:通过这次的项目实战,极大的加强了网页中部分特效的实现逻辑,

     加深对JQuery的理解与动手能力;

     加深对vue,element的理解与动手能力;

     对开发网站的流程,上手的速度又上了一个台阶;

------------------------------------------------------------------------------------------------------------------------

效果如下:

1.1 首页展示

  主要编写了头部导航条,轮播图,无缝滚动,中间主体内容,底部扩展信息

 1.2 滑动二级菜单/图片轮播/图片无缝滚动展示

  使用JQ实现当鼠标移入时二级菜单向下滑动显示,移出时向上滑动隐藏

  使用JQ实现轮播图:创建定时器,每隔两秒图片向左滑动,循环

  使用JQ实现图片无缝滑动:当鼠标移入时停止滑动并产生蒙版效果,鼠标移出时恢复

 1.3  Tab切换 

  使用JQ选中当前选项卡的三个标题,被选中者为红色,未被选中者为黑色

  使用JQ监听屏幕的滚动,实现屏幕滚动到一定距离之后选项卡吸顶效果

  

项目实战---模拟站酷网站

原文地址:https://www.cnblogs.com/wuhefeng/p/10130277.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved