GitHub获取富强资源

CSS 学习记录02:菜单悬浮、全屏Banner、幻灯片

文章目录

本文最后更新于 69天前,如有内容失效请留言告知。

已经离上次 CSS 学习记录 01:链接背景悬浮效果 过去3天了,这三天除了上班,就趁晚上休息时间,学习前端知识,并撸了几个小项目拿来练练手。

CSS2-菜单悬浮&全屏banner

CSS2-菜单悬浮&全屏banner

菜单悬浮效果

效果预览

html文件

<!-- 先编写大概布局 -->
<div class="top">
  <ul class="father">
  <li>父菜单一
    <ul class="son">
      <li>子菜单1</li>
      <li>子菜单2</li>
      <li>子菜单3</li>
    </ul>
  </li>
  <li>父菜单二
  <ul class="son">
      <li>子菜单1</li>
    </ul>
  </li>
  <li>父菜单三
  <ul class="son">
      <li>子菜单1</li>
      <li>子菜单2</li>    
    </ul></li>
</ul>
</div>
<div class="content">
  <p>
    刚开始学习前端时,一定要以培养兴趣、快速入门为目标。我入门前端时,由于没有基础、啥都不懂,因此选择在线实战教程网站来学习,跟着教程案例一行行把代码敲下来,实时浏览显示效果,很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时,我对看过的知识点没有什么印象,基本是看了就忘,当我想要自己写一个网站,也根本无从下手。
  </p>
</div>

Css文件

/*
   1. 页面初始化
*/
*{
  margin: 0;
  padding: 0;
}
li{
  list-style: none;
}
/*
   2. 设置顶部栏宽高
*/
.top{
  width: 80%;
  height: 10%;
  margin: 0 auto;
  border: 1px solid #000;
  border-radius: 5px;
}
/*
  3. 设置父菜单的布局样式
*/
.father{
  text-align: center;
  /*
  详细可见:
  1. https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
  2. https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
  */
  display: flex;
  justify-content: center;
  position: relative;
}

.father>li{
  padding: 20px 6px;
  position: relative;
}

.father>li:hover{
 color: #fff; 
}

/*
  6. 设计父菜单悬浮背景效果
*/
.father>li::before,.son>li::before{
  content: "";
  background-color: rgb(255, 118, 152);
  position: absolute;
  top: 25%;
  left: 0;
  height: 50%;
  width: 100%;
  z-index: -1;
  border: 1px solid #000;
  border-radius: 5px;
  opacity: 0;
  transform: scaleX(0.3);
  transition: transform 600ms cubic-bezier(0.23, 1, 0.32, 1) 0s;
}
.father>li:hover::before,.son>li:hover::before{
  transform: none;
  opacity: 1;
}

.father>li:hover .son{
  opacity: 1;
}


/*
  4. 设置子菜单的布局样式
*/
.son{
  background-color: #f7f9fe;
  color: #000;
  min-width: 100px;
  text-align: left;
  border: 1px solid #000;
  border-radius: 5px;
  position: absolute;
  top: 45px;
  text-align: center;
  margin: 0 0 0 -25px;
  padding: 10px 6px;
  /*
  opacity:元素的不透明度
  详细可见:https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity
  */
  opacity: 0;
  /*
  translateY() 在页面垂直移动元素
  */
  transform: translateY(5px);
  transition: all .6s cubic-bezier(.4,.01,.165,.99);
}
.son>li{
  padding: 6px;
  position: relative;
}

.son>li::before{
  height: 60%;
  top: 20%;
}

.content{
  width: 80%;
  height: auto;
  margin: 0 auto;
}

全屏banner

效果预览

html文件

<body>
  <div class="page" id="page">
    <div class="info" id="info">
      <p>彼岸花花开彼岸,断肠草草断肝肠。</p>
      <p>文武科技柜</p>
    </div>
    <div class="scroll-down scroll-down-effects" id="scrollDown">
      ↓
    </div>
  </div>
  <div class="content" id="content-inner">
    <p>刚开始学习前端时,一定要以培养兴趣、快速入门为目标。我入门前端时,由于没有基础、啥都不懂,因此选择在线实战教程网站来学习,跟着教程案例一行行把代码敲下来,实时浏览显示效果,很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时,我对看过的知识点没有什么印象,基本是看了就忘,当我想要自己写一个网站,也根本无从下手。</p>
    <p>刚开始学习前端时,一定要以培养兴趣、快速入门为目标。我入门前端时,由于没有基础、啥都不懂,因此选择在线实战教程网站来学习,跟着教程案例一行行把代码敲下来,实时浏览显示效果,很轻松地就把 HTML、CSS、JavaScript 的语法基础过了一遍。但是这时,我对看过的知识点没有什么印象,基本是看了就忘,当我想要自己写一个网站,也根本无从下手。</p>
  </div>
</body>

Css文件

* {
  padding: 0;
  margin: 0;
}
/*
必须设置页面html,body 100%,否则页面内容无法全屏填充
*/
body {
  width: 100%;
  height: 100%;
}

.page {
  height: 100vh;
  /*
  background
  详细可看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background
  */
  background-image: url(https://api.dujin.org/bing/1920.php);
  /* background-image: -webkit-cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 75%); */
  /* background-image: cross-fade(url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==), url(https://api.dujin.org/bing/1920.php), 30%); */
  /*
  background-attachment:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。
  详细可看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-attachment
  */
  background-attachment: scroll !important;
  /*
   background-repeat: 背景图像的重复方式
  */
  background-repeat: no-repeat;
  /*
  background-position: 背景图片设置初始位置
  */
  background-position: center center;
  /*
  background-size: 背景图片大小
  cover:缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。
  */
  background-size: cover;
  overflow: hidden;
  text-align: center;
  color: #fff;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  给图片添加遮罩
*/
.page::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.info {
  z-index: 1;
  font-weight: 700;
}

.scroll-down {
  position: absolute;
  width: 100%;
  bottom: 0px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}

.scroll-down-effects {
  animation: 1.5s ease 0s infinite normal none running scroll-down-effect;
}

/*
  keyframes(关键帧):控制动画序列的中间步骤
  详细可看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes
*/
@keyframes scroll-down-effect {
  0% {
    bottom: 0px;
    opacity: 0.4;
  }

  50% {
    bottom: 10px;
    opacity: 1;
    /*

    详细可看:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter
    */
    filter: none;
  }

  100% {
    bottom: 0px;
    opacity: 0.4;
  }
}

.content p{
  height: 500px;
}

JavaScript文件

const btf = {
  scrollToDest: (pos, time = 500) => {
    /*
    pageYOffset:垂直方向滚动的像素
    */
    const currentPos = window.pageYOffset
    if (currentPos > pos) pos = pos - 70
    if ('scrollBehavior' in document.documentElement.style) {
      /*
      https://developer.mozilla.org/zh-CN/docs/Web/API/Window/scrollTo
      */
      window.scrollTo({
        top: pos,
        behavior: 'smooth'
      })
      return
    }
  }
}
const scrollDownEle = document.getElementById('scrollDown');
scrollDownEle.addEventListener('click', function() {
  console.log("666");
  /*

  1. https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop
  2. https://www.runoob.com/jsref/prop-element-offsettop.html
  */
  btf.scrollToDest(document.getElementById('content-inner').offsetTop, 600)
})

幻灯片

效果预览

html文件

<div class="banner">
  <img src="http://iph.href.lu/600x300?text=图片1" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片2" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片3" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片4" alt="">
  <img class="b-img" src="http://iph.href.lu/600x300?text=图片5" alt="">
  <div class="pre">👈</div>
  <div class="next">👉</div>
  <div class="b-quan">
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

Css文件

* {
  margin: 0px;
  padding: 0px;
}

.banner {
  width: 600px;
  height: 300px;
  margin: 0 auto;
  position: relative;
}

img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}

.b-img {
  opacity: 0;
}

li:nth-child(1){
  list-style: disc;
}

li{
  list-style: circle;
}

.pre,.next{
  position: absolute;
  top: 50%;
  z-index: 999;
  cursor: pointer;
}
.next{
  right: 0;
}

JavaScript文件

/* 
代码参考:
[jQuery实现轮播图 - 掘金](https://juejin.cn/post/6858605052978790414)
*/
let index = 0;
doStart(); // 默认开启
let imgLength = $('img').length;
// 自动轮播效果
function doStart() {
  myTime = setInterval(function() {
    //让上一张淡出
    imgOut(index);
    index = ++index % imgLength;
    //让下一张淡入
    imgIn(index);
  }, 3000);
}

$(".banner").mouseover(function() {
  clearInterval(myTime);
}).mouseout(function() {
  doStart();
});

$(".pre").click(function() {

  //让上一张淡出
  imgOut(index);
  index--;
  if (index < 0) {
    index = imgLength-1;
  }
  //让下一张淡入
  imgIn(index);
});


$(".next").click(function() {
  //让上一张淡出
  imgOut(index);
  index = ++index % imgLength;
  //让下一张淡入
  imgIn(index);
});

// 灰点事件
$("li").mouseover(function() { // 鼠标移入
  dotIn(this);
}).mouseout(function() { // 鼠标移出
  dotOut(this);
}).click(function() { // 单击
  // 不同的灰点单击才变换
  if (index != $(this).index()) {
    imgOut(index); // 当前的淡出
    index = $(this).index();
    imgIn(index); // 小圆点对应的淡入
  }
});

function imgIn(num) {
  $("img").eq(num).animate({
    "opacity": 1
  }, 1000);
  dotIn($("li").eq(num)); // 对应灰点亮起
}

// 图片淡出
function imgOut(num) {
  $("img").eq(num).animate({
    "opacity": 0
  }, 1000);
  dotOut($("li").eq(num)); // 对应灰点暗去
}

function dotIn(dot) {
  $(dot).css({
    "list-style": "disc"
  });
}

function dotOut(dot) {
  $(dot).css({
    "list-style": "circle"
  });
}

总结

通过这几天学习小项目,发现不知不觉有些样式竟然能自己默写出来,写不出来也大概知道需要用到哪些东西,一搜就解决了。这可能就是所谓的「熟能生巧」吧

如果你也正在学习前端,就动起手来吧,只有敲起代码,你才知道你有哪里不懂了。共勉。

取消

感谢您的支持,我会继续努力的!

扫码支持
请博主喝咖啡☕

打开支付宝扫一扫,即可进行扫码打赏哦

文章作者: 斌仔
文章链接: https://www.wangdu.site/course/1134.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 文武科技柜

斌仔

公众号:文武科技社

相关推荐

1 条评论

  1. 小红
    谷歌浏览器Windows 山东省

    感谢分享,赞一个

回复 小红 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

:?: :非难: :伤心: :邪恶: :!: :微笑: :oops: :咧嘴: :eek: :休克: :色: :睡觉: :???: :凉: :大声笑: :狂: :扭曲: :滚: :眨眼: :理念: :箭头: :中性: :哭: :格林先生:

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

CSS 学习记录02:菜单悬浮、全屏Banner、幻灯片
嘿!有什么能帮到您的吗?
返回顶部 夜间模式 目录导航 随便看看

显示

忘记密码?

显示

显示

获取验证码

Close