写了一个简单的网页…

date

Feb 21, 2021

slug

写了一个简单的网页…

status

Published

tags

碎碎念

旧文章

网页

😆

summary

前几天,我的一个同学在学习Html的时候,他来问我在鼠标移到一个按钮上的时候应该是怎样的才好看(然而我已经很久很久很久没动过网页相关的东西了......这个那个的东西基本都忘记了).我推荐是底色跟字色反一下,但是听他说看起来挺奇怪.

type

Post

就是这种反转颜色咯

然后在查阅了一些网站之后决定使用以下效果

就是在底部加一个border

这样显得动画没有那么生硬

原本他是打算导航栏左侧放一个Logo位,然后其他按钮居中,但是效果并不好于是选择去掉Logo位,最后折腾了老半天都不好看😂,我问他到底需要做成什么样子,他就用ppt大概做了个演示

啊这样就简单易懂了

于是我决定自己尝试去写一下(顺便当复习了)

框架部分没什么说的,只是自己手生了啥都不会了,折腾了半天最后也是写出来了

这里面最重要的就是首页标题随着页面翻动渐入渐出的效果了.引入了JQuery,然后在网上搜索了半天终于写出了西面这些(简单的东西)

$(document).ready(function() { //页面加载完执行以下代码
	$('body').scroll(function() { //在标签body内的滚动操作
		var scroll = $('body').scrollTop() / 2; //获取滚动距离/2
		var total = $(window).height() / 2; //获取窗口高度/2
		var result = total - scroll; //用窗口高度-滚动距离得到banner部分剩余高度/2
		if (result >= total / 4) { //如果剩余高度大于窗口1/4 则执行移动标题位置
			$(".title").css("top", result); //标题距离顶部
			if (result <= total / 1.4) { //如果剩余高度小于窗口的5/7 则开始改变透明度
				$(".title").css({
					"opacity": (result - total / 4) / (total / 2.6),
					"visibility": "visible"
				}); //透明度以及可见度
			} else {
				$(".title").css({
					"opacity": 1,
					"visibility": "visible"
				});
			}
		} else {
			$(".title").css({
				"opacity": 0,
				"visibility": "hidden"
			});
		}
	});
});

颜色改用了更为柔和的#EE6E73,还改了下右边滚动条的样式

最后写出来的效果还不错,放出个demo看看

💡

Jun 3, 2022 注 demo找不到了