jQuery学习

css-tricks 里提供的还不错，不用看视频，直接看文本就能获取关键信息。不过这里的JQ是2.1版本的。

需要注意的一点的是，JQ也是有版本区别的，大概知道这些区别有助于选用和定位问题解决的思路。

version 1 & 2 &3

总结一下：区别主要在浏览器兼容性上，用法基本没变化。

jq tutorial udemy出的要108刀呢，但是代码不要钱随便看，所以我这样的都是直接看代码。这里的版本更老一点 ， 1.x 的。

JQ和原生写法对比:这个不错，相当于常看常新，常用的不能说都在这，就是眼熟。

小作业：xuehusang

主要是参考一个网站雪狐桑

要求

1. 顶部导航自适应
2. 主banner随鼠标移动
3. 壁纸表情包 slider
4. 简介布局
5. 时间轴
6. Q&A展开关闭
7. 推荐视频 悬浮显示标题
8. 关于和底部

结果

githubpage,不足还有很多，真抠的话这个还原度非常稀烂……

制作的流程也不是从上到下，而是基本写完导航就底部，然后倒着写，一般情况下一个网站最亮眼的地方（最难）就是开头，因此我打算最后做。

整体安排

页面不是一下子就做完的，因此采用了jquery的load()方法在index.html中的不同div中插入section。

        $("#mainNav").load("assets/header.html");
        ...

header部分

主要是学到了一个hover的用法，通过hover搭配transition，可以制作一些友好的微动效：

.navbar-nav .nav-item:hover .navDeco{
  width: 100%;
}
.navbar-nav .nav-item .navDeco{
  transition: width 1s;
  width: 0%;
}

footer部分

这个部分属于完全就是偷懒，因为没啥好写的： footer examples:找到喜欢的差不多改改颜色和间距就行了…..

about部分

这个就是三个很常规的响应式卡片，需要在不同尺寸下一行有不同的个数grid - bootstrap最重要的部分。卡片可以用bootstrap自带的，也可以在这上面增改一些特性。

<div class="col-sm-12 col-md-4">

download

这个部分也是比较简单，稍微用了一点新的地方是modal，也就是弹窗。

<a class="text-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">账号密码</a>

三个参数，第二个主要是指像了类型，第三个指向了弹窗id。

recommend

这个也是比较普遍的卡片布局，唯一值得写一写的是hover后出现的遮罩，还能接着hover。

.img-box {
    position: relative;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(66 101 121 / 50%) ; 
    opacity: 0;
    transition: opacity 1s;
}


.img-box a:hover .mask { opacity: 1; }

逻辑上是img-box里放图片和mask，box位置relative，mask位置absolute，通过top left来指定位置。 具体参考的文章css-实现鼠标移至图片上显示遮罩层,掘金特别适合不知道英文咋描述的时候来搜搜看。

Q & A

这部分完成度其实是不高的，bootstrap部分的collapse 只能说是拿来改了改，我觉得需要提升的地方：

• 气泡小三角还是得做出来
• 这个是现成的，但是不是自己写更能写出自定义的样式？
• 以及点击条目应该是有icon动效的

timeline

这部分完成度应该是最低的，尽管采用了一点animation.css，但是效果不行，就是花活没有玩出来。

• 卡片动效的逻辑不对
• 出现速率和页面滚动速率有关系
• 卡片数据不是从API/json文件中获取的

主要是1，2点，完全是实现效果不行。

Intro

这部分主要是采用了了一个silider库：swiper.js,是一个非常方便的slider解决方案（兼容，适配，手机，web），还提供各种框架使用办法。

slider

这部分两个slider用的是两个不同的，大图那种炫酷的切换是采用的layerslider 这个要钱所以就github找了一下果然有。

小图表情包滚动，这个采用的就是swiper.js,单核心是这句css，（swiper.js 还给配了个.css 必须带上）

.swiper-wrapper
{
  transition-timing-function: linear;
}

banner

这个部分就是layerslider的应用，部分元素跟随鼠标的移动，一开始我做的banner2，但是觉得拼凑感觉好强烈，还是觉得得做点更丰富的页面感受。

主要就是素材下下来后要自己做一下裁切。

期间因为学习layerslider，十分想不开咋要收钱，结果搜出来一个文字版本的layertext plus+ splitting.js

补充1

后续是我看了一下这个splitting的一些codepen，发觉人家其实是能做成image的切换的splitting images。那么这个就解决了slider部分的那个大图切换。

那么问题就变成了，如果一个页面banner部分为了一个视差鼠标跟随的效果，引入一个库是不是划算，是不是要考虑换一个？ 一个基于jq的很类似的鼠标跟随效果

总结

至此基本就完了，我觉得用bootstrap框架还是很好的，就是省事，但是但是一些效果如果想好看，更自由，那就是自己手写最好。

需要提高的部分：

• AJAX
• JQuery get &post
• API
• timeline最好还是完善一下的好。

补充1

后续是补充了timeline，和timeline2，用的一个是读取本地json文件，一个是本地读取xml文件。

xml请教了一下，是java专用的，用处不大。json主要是双引号用太多了我头大，其实没啥大的抵触，还是没习惯。

动效是不咋行的，这是个问题，因此我打算从这个出发专门强化一下css 的动画效果，因为认真分析一下我之前做设计比较抵触做动效，就是因为本质上很累，很低效：视觉动效是和软件/生态/技艺…强绑定的，空间想象力好不顶用，得在一个生态里练。而且产出复用性很低，制作人的复用性却很高。

但是代码其实某种程度上降低这种累，就是学的东西和直观视觉上手肯定区别很大。这是我需要去搞定的。

属于前期曲线很长，但是一旦获得，就很风骚。所以我打算搞一个《浅学 ｜ css effect》的博文。