JavaScript—实现手风琴画册
创始人
2024-04-20 12:39:18
0

在这里插入图片描述

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

【本文目录】

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

项目效果

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

请添加图片描述

涉及功能

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

项目分析

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

在这里插入图片描述

项目需求

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

项目实现

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

处理错误

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

共性问题

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

技术实现

  • 使用DIV布局HTML网页


Gallery

some text here

this is a big title

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.

  • 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)}}
}

  码文不易,本篇文章就介绍到这里,如果想要学习更多Java系列知识点击关注博主,博主带你零基础学习Java知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。

在这里插入图片描述

相关内容

热门资讯

鸿蒙怎样还原安卓系统,系统切换... 你有没有想过,鸿蒙系统竟然能还原安卓系统?这听起来是不是有点像魔法一样神奇?没错,今天就要带你一探究...
电脑安卓转苹果系统,系统迁移攻... 你有没有想过,有一天你的安卓手机突然变成了苹果的忠实粉丝,想要跳槽到iOS的阵营呢?这可不是什么天方...
安卓xp系统下载地址,轻松获取... 你有没有想过,手机系统也能穿越时空?没错,今天我要给你揭秘的就是这样一个神奇的存在——安卓XP系统。...
安卓系统怎么清理相册,安卓系统... 手机里的相册是不是越来越臃肿了?每次打开都感觉像是在翻山越岭,找一张照片都要费老鼻子劲。别急,今天就...
安卓系统安装ios转移,轻松实... 你有没有想过,手机系统之间的转换竟然也能如此神奇?没错,今天就要来聊聊安卓系统安装iOS转移这个话题...
安卓系统与ios系统的优势,系... 你有没有想过,为什么你的手机里装的是安卓系统而不是苹果的iOS系统呢?或者反过来,为什么你的朋友用的...
安卓系统游戏如何升级,轻松实现... 亲爱的安卓玩家们,你是否也和我一样,对安卓系统游戏升级这件事充满了好奇和期待呢?每次游戏更新,都仿佛...
安卓系统蛋仔派对,安卓系统下的... 你有没有发现,最近你的手机里多了一个超级好玩的游戏?没错,就是安卓系统上的“蛋仔派对”!这款游戏可是...
坚果3安卓原生系统,深度体验原... 你有没有听说过坚果3这款手机?它可是最近在数码圈里火得一塌糊涂呢!今天,我就要来给你详细介绍一下这款...
安卓子系统点不开,排查与解决指... 最近是不是你也遇到了安卓子系统点不开的烦恼?这可真是让人头疼啊!别急,今天就来给你详细解析一下这个问...
安卓系统经常误删文件,如何有效... 你有没有遇到过这种情况?手机里的文件突然不见了,找来找去,怎么也找不到。别急,这可能是安卓系统的小调...
安卓51系统如何破解,轻松解锁... 安卓51系统如何破解——探索未知的技术边界在数字化时代,手机已经成为我们生活中不可或缺的一部分。而安...
安卓系统怎么换回主题,安卓系统... 亲爱的手机控们,你是不是也和我一样,对安卓系统的主题换换换乐此不疲呢?不过,有时候换着换着,突然发现...
黑莓安卓系统 太垃圾,令人失望... 你有没有用过黑莓的安卓系统?别告诉我你没有,因为现在这个系统真的是太垃圾了!是的,你没听错,就是那个...
修改安卓系统权限代码,安卓系统... 你有没有想过,你的安卓手机里那些神秘的系统权限代码?它们就像隐藏在手机里的秘密通道,有时候让你觉得既...
虚拟大师安卓系统教程,教程详解... 你有没有想过,手机里的世界可以变得更加神奇?今天,就让我带你一起探索虚拟大师安卓系统的奥秘吧!想象你...
基于安卓系统个人博客,轻松构建... 你有没有想过,在这个信息爆炸的时代,拥有一片属于自己的网络小天地是多么酷的事情啊!想象每天都能在这里...
安卓怎么传到苹果系统,从安卓到... 你是不是也有过这样的烦恼:手机里存了好多好用的安卓应用,可是一换到苹果系统,就发现这些宝贝们都不见了...
安卓改系统字体app,安卓系统... 你有没有想过,手机上的字体也能变得个性十足?没错,就是那个安卓改系统字体app,它可是让手机界面焕然...
安卓系统重启密码错误,破解与预... 手机突然重启了,屏幕上竟然出现了密码输入的界面!这可怎么办?别急,让我来帮你一步步解决这个安卓系统重...