稻米鼠 · 更新于 2018-08-16 14:00:51

第三十四章 一些补遗

在开始的时候有一件事情我们一直说后面再说后面再说,但是后来我忘了……为什么酱紫……

不过现在来讲一点也不晚啊,我们来讲一讲导航里那个奇葩的链接地址的问题,回过头来改一下导航里的链接地址哦……

等等……为什么是改……因为我后面没按着那个写啊……额,我说我写错了你能原谅我吗?算了,我就这么写了,你来咬我呀!

<ul id="nav-items">
    <li class="nav-item"><a href="#">首页</a></li>
    <li class="nav-item"><a href="#post">下载</a></li>
    <li class="nav-item"><a href="#post-a">特点</a></li>
    <li class="nav-item"><a href="#post-b">关于</a></li>
</ul>

有没有觉得似乎看懂了什么?诶,链接到的好像是我们页面中的的 ID 耶。嗯哼,挺好理解的吧?这个写法叫做锚点,可以链接(用来跳转)到页面的指定元素。事实上他可以用来跳转到指定页面的指定元素。比如写作:<a href="http://coffee.zji.me/index.html#footer"></a>

这个效果大家可以去试试看,我就不截图了,毕竟静态图片也不是很好表示。

然后加点小料,因为老板端着他那杯 82 年的普洱过来说:要动起来,动次打次的节奏啊~~我的滑板鞋……

老板渐行渐远,我的内心却久久无法平复。还没学到 Javascript 啊!怎么做动态?好在我们还有别的办法进行变通。现在我们就来给高大上的二维码部分做一个简单的动态效果。

首先我们分析一下:我要做的是鼠标滑到二维码上二维码放大的效果。那么这个效果中有一个小要点,就是放大前后的图片哪个点的坐标是不变的?这是一个放大的基准点。假设是图片的左上角位置不变,那么放大的时候就是图片向右侧和下方进行延伸(拉伸)效果。当然这个样子的话可能显得比较突兀(毕竟我们现在还没办法做过渡效果),所以我们选择中心点不动,放大时图片向四周延伸的效果,这样视觉的焦点基没变,会觉得舒服一些。

其实 Html 部分我们完全不需要修改,只要在现在的 CSS 文件上做些小手脚就可以了的。

#qrcode {
    float: right;
}
#qrcode img {
    width: 250px;
    height: 250px;
}

这是当前相关的 CSS,因为现在的图片已经很大了,其实我们并不希望他更大,所以我们可以先把他弄的小一点,把放大的空间也预留出来。

#qrcode {
    float: right;
}
#qrcode img {
    width: 210px;
    height: 210px;
    padding: 20px;
}

现在图片内容的宽高各缩小了 40px,但是因为加了内补,所以它所占的面积并没有变化,他的中心点也依旧在原来的位置。然后我们给图片加一个 :hover 状态。

#qrcode img:hover {
    width: 250px;
    height: 250px;
    padding: 0;
}

其实就是鼠标滑到上面的时候恢复到以前啊,来仔细看一看,认真想一想,是不是很简单的一件事情?其实就凭一个 hover 就可以做出很多好玩的效果啦~

然后学到这里你的写的怎么样了呢?是不是比我的高大上许多倍?想不想发出来给大家看一看?下节课来教大家如何发布页面到互联网上。

本章代码下载:本章代码


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me