✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进。
个人主页:Java Fans的博客
个人信条:不迁怒,不贰过。小知识,大智慧。
当前专栏:前端案例分享专栏
✨特色专栏:国学周更-心性养成之路
本文内容:JavaScript—实现手风琴画册
更多内容点击
1、CSS中iconfont 彩色图标使用详解
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Gallerytitle>
<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 herep>
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 titleh1>
<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>
*{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%);}
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知识。与此同时,对于日常生活有困扰的朋友,欢迎阅读我的第四栏目:《国学周更—心性养成之路》,学习技术的同时,我们也注重了心性的养成。