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

开发工具: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

时间: 2024-08-03 15:14:17

项目实战---模拟站酷网站的相关文章

零基础Swift实战开发从入门到精通(4大项目实战、酷跑熊猫、百度音乐、足球游戏等)

第一部分:Swift基础语法 第1节:变量 第2节:常量 第3节:使用PlayRound编写Swift程序 第4节:类型检查与推断 第5节:类型别名 第6节:计算器 第二部分:字符和字符串 第1节:字符(Characters) 第2节:字符串-定义 第三部分:数据类型(DataType) 第1节:整型(int.Uint) 第2节:浮点数 第3节:Bool 第四部分:数据类型转换 第1节字符串转换数字类型 第2节数字类型转换字符串 第3节:数字类型之间转换 更多............ 项目实战一

Android项目实战(四十):在线生成按钮Shape的网站

原文:Android项目实战(四十):在线生成按钮Shape的网站 AndroidButton Make  右侧设置按钮的属性,可以即时看到效果,并即时生成对应的.xml 代码,非常高效(当然熟练的话 自己手写代码更快) 原文地址:https://www.cnblogs.com/lonelyxmas/p/8970434.html

KNN算法项目实战——改进约会网站的配对效果

KNN项目实战--改进约会网站的配对效果 1.项目背景: 海伦女士一直使用在线约会网站寻找适合自己的约会对象.尽管约会网站会推荐不同的人选,但她并不是喜欢每一个人.经过一番总结,她发现自己交往过的人可以进行如下分类: 不喜欢的人 魅力一般的人 极具魅力的人 2.项目数据 海伦收集约会数据已经有了一段时间,她把这些数据存放在文本文件datingTestSet.txt中,每个样本数据占据一行,总共有1000行. datingTestSet.txt数据集下载 海伦收集的样本数据主要包含以下3种特征:

Python Flask 快速构建高性能大型web网站项目实战

Python Flask 快速构建高性能大型web网站项目实战视频[下载地址:https://pan.baidu.com/s/1cUggNbUvptYz5vvwBhsdrg ] 作为最最流行的Python Web开发的微框架,Flask独树一帜.它不会强迫开发者遵循预置的开发规范,为开发者提供了自由度和创意空间.突然发现这个对自动化运维开发非常有用,发上来,给大家! Python Flask 快速构建高性能大型web网站项目实战视频 project.zip 第1章 课程介绍1.1-1.2课程导学

最新短视频网站实战教程 node.js+ES+Koa2基础到精通项目实战课程

下载地址:百度网盘下载 node.js+ES+Koa2项目实战课,课程目录很多,只展示了主要章节课程目录第1章 2018 年的编程姿势1-0 课前必看.mp41-1 koa2导学.mp41-2 安装跟进最新 node.js 版本.mp41-3 毫不犹豫的使用promise.mp41-4 使用babel 编译es7 async function.mp4 第2章 必会 ES6-7 语法特性与规范2-0 课前必读.mp42-1 生成器函数.mp42-2 co 库执行 promise 和 generat

2019千锋Web前端幸福西饼整站项目实战

课程目录:├─剪辑视频│      code.rar│      第1集 幸福西饼页面01.mp4│      第2集 幸福西饼页面02.mp4│      第3集 幸福西饼页面03.mp4│      第4集 幸福西饼页面04.mp4│      第5集 幸福西饼页面05.mp4│      第6集 幸福西饼页面06.mp4│      └─原视频        01幸福西饼页面.mp4        02幸福西饼页面.mp4        03幸福西饼页面.mp4        04幸福西饼

iOS开发——使用技术OC篇&项目实战总结之开发技巧

项目实战总结之开发技巧 本文收集了25个关于可以提升程序性能的提示和技巧 1.使用ARC进行内存管理 2.在适当的情况下使用reuseIdentifier 3.尽可能将View设置为不透明(Opaque) 4.避免臃肿的XIBs 5.不要阻塞主线程 6.让图片的大小跟UIImageView一样 7.选择正确的集合 8.使用GZIP压缩 9.重用和延迟加载View 10.缓存.缓存.缓存 11.考虑绘制 12.处理内存警告 13.重用花销很大的对象 14.使用Sprite Sheets 15.避免

Spark大型项目实战:电商用户行为分析大数据平台

本项目主要讲解了一套应用于互联网电商企业中,使用Java.Spark等技术开发的大数据统计分析平台,对电商网站的各种用户行为(访问行为.页面跳转行为.购物行为.广告点击行为等)进行复杂的分析.用统计分析出来的数据,辅助公司中的PM(产品经理).数据分析师以及管理人员分析现有产品的情况,并根据用户行为分析结果持续改进产品的设计,以及调整公司的战略和业务.最终达到用大数据技术来帮助提升公司的业绩.营业额以及市场占有率的目标. 1.课程研发环境 开发工具: Eclipse Linux:CentOS 6

yii2项目实战-路由美化以及如何正确的生成链接

yii2项目实战-路由美化以及如何正确的生成链接 更新于 2016年12月17日 by 白狼 被浏览了 705 次 美化路由 何为美化路由呢?美化嘛,无外乎就是给路由化化妆,让她好看点.我虽没化过妆,那好歹也是见过描描眉的.下面我们就来看看如何给你的路由添加添加点"颜色"的. yii的路由美化工作,全权由urlManager组件负责.默认情况下,该组件并没有开启. 我们在配置文件backend\config\main.php中简单配置下该组件 'urlManager' => [