JavaScript—实现手风琴画册

news2024/12/29 9:44:38

在这里插入图片描述

✅作者简介：热爱国学的Java后端开发者，修心和技术同步精进。
🍎个人主页：Java Fans的博客
🍊个人信条：不迁怒，不贰过。小知识，大智慧。
💞当前专栏：前端案例分享专栏
✨特色专栏：国学周更-心性养成之路
🥭本文内容：JavaScript—实现手风琴画册
更多内容点击👇
1、CSS中iconfont 彩色图标使用详解

【本文目录】

- 项目效果
- 涉及功能
- 项目分析
- 项目需求
- 项目实现
- 处理错误
- 共性问题
- 技术实现

项目效果

图片分布在格子中
鼠标放置的格子会放大
其他格子自动调整大小
放大的个子中显示文字

请添加图片描述

涉及功能

JavaScript：
- 控制格子的大小
- 响应鼠标
CSS：
- 处理动画

项目分析

放大的格子
与放大格子在同一列
与放大格子在同一行
被技开的格子

在这里插入图片描述

项目需求

为该画册添加自动滚动放大的功能
- 每隔3秒依次放大一张图片
- 当鼠标移入任意图片时，停止自动滚动
- 当鼠标不在任意一张图片上，恢复自动滚动

项目实现

使用JS封装代码
- 引用类代码
- 实例化类
实现类代码
- 实现默认配置
- 检测用户配置
- 实现图片放大方法
- 添加鼠标时间
实现CSS代码
- 添加动画
- 处理图片居中
- 处理文字动画

处理错误

分析错误成因
编写解决方案

共性问题

常见问题及解决方法
代码规范问题
调试技巧

技术实现

使用DIV布局HTML网页

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Gallery</title>
  <link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <div id="xy-gallery">
    <div><img src="./images/image1.jpg" /></div>
    <div>
      <img src="./images/image2.jpg" />
      <div class="text">
        <p>some text here</p>
      </div>
    </div>
    <div><img src="./images/image3.jpg" /></div>
    <div><img src="./images/image4.jpg" /></div>
    <div><img src="./images/image5.jpg" /></div>
    <div>
      <img src="./images/image6.jpg" />
      <div class="text">
        <h1>this is a big title</h1>
        <p>Laborum anim quis non sint qui. Non deserunt laboris nulla proident tempor in occaecat. Excepteur proident ex veniam labore. Magna dolor sunt pariatur nisi nulla. Est pariatur amet cillum sint nostrud. Proident mollit occaecat exercitation minim nisi labore ullamco nulla mollit pariatur. Commodo aute est culpa pariatur velit tempor enim ipsum deserunt id non tempor.</p>
      </div>
    </div>
    <div><img src="./images/image7.jpg" /></div>
    <div><img src="./images/image8.jpg" /></div>
    <div><img src="./images/image9.jpg" /></div>
    <div><img src="./images/image10.jpg" /></div>
    <div><img src="./images/image11.jpg" /></div>
    <div><img src="./images/image12.jpg" /></div>
    <div><img src="./images/image13.jpg" /></div>
    <div><img src="./images/image14.jpg" /></div>
    <div><img src="./images/image15.jpg" /></div>
    <div><img src="./images/image16.jpg" /></div>
    <div><img src="./images/image17.jpg" /></div>
    <div><img src="./images/image18.jpg" /></div>
    <div><img src="./images/image19.jpg" /></div>
    <div><img src="./images/image20.jpg" /></div>
  </div>
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript">
    var gallery = new XyGallery("xy-gallery", {width: 5, height: 4})
  </script>
</body>
</html>

CSS样式美化界面

*{margin: 0; padding: 0;}
.xy-gallery > div{ 
  float: left;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  transition: all .3s;
}
.xy-gallery > div img{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.xy-gallery > div .text{ 
  transition:all 1s .3s;
  opacity: 0;
  bottom: 0;
  transform: translateY(100%);
  position: absolute;
  width: 340px;
  background: rgba(255, 255, 255, 0.3);
  padding: 10px 20px;
  color: #ffffff;
  box-sizing: border-box;
}
.xy-gallery > div.active .text{ opacity: 1;transform: translateY(0%);}

使用JavaScript制作特效

function XyGallery(id, option) {
  var container = document.getElementById(id);
  if (!~container.className.indexOf('xy-gallery')) container.className += " xy-gallery";
  var defaultOption = {
    defaultWidth: 130,
    defaultHeight: 40,
    activeWidth: 340,
    activeHeight: 400,
    animateDuration: 300
  }

  option = Object.assign({}, defaultOption, option);

  if (option.width && option.height && option.width * option.height != container.children.length) throw "width and height not match children length!";

  var lastRunTime = new Date(0);
  var runId = 0;
  var activePicture = function (index) {
    clearTimeout(runId)
    var currentTime = new Date();
    if (currentTime - lastRunTime < option.animateDuration) {
      runId = setTimeout(function () {
        activePicture(index)
      }, option.animateDuration);
      return;
    }
    lastRunTime = currentTime;

    container.style.width = (option.width - 1) * option.defaultWidth + option.activeHeight + 'px'
    var cx = index % option.width;
    var cy = Math.floor(index / option.width);
    for (var x = 0, xl = option.width; x < xl; x++) {
      for (var y = 0, yl = option.height; y < yl; y++) {
        var cindex = y * option.width + x;
        var item = container.children[cindex];
        if (x == cx && y == cy) {
          item.className = "active";
          item.style.width = option.activeWidth + "px";
          item.style.height = option.activeHeight + "px";
        } else if (x == cx) {
          item.className = "";
          item.style.width = option.activeWidth + "px";
          item.style.height = option.defaultHeight + "px";
        } else if (y == cy) {
          item.className = "";
          item.style.width = option.defaultWidth + "px";
          item.style.height = option.activeHeight + "px";
        } else {
          item.className = "";
          item.style.width = option.defaultWidth + "px";
          item.style.height = option.defaultHeight + "px";
        }
      }
    }
  }
  activePicture(0);

  var runId = 0;
  Array.prototype.forEach.call(container.children, function (o, i) {
    o.addEventListener('mouseenter', function (evt) {
      activePicture(i);
    })
  })

  return {
    active: activePicture,
    setSize: function(width, height){
      if (width && height && width * height != container.children.length) throw "width and height not match children length!";
      option.width = width;
      option.height = height;
      activePicture(0)
    }
  }
}