html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效

这是一款js和CSS3 3D立方体图片画廊特效。该3D立方体图片画廊特效通过CSS3进行布局，构建立方体，然后通过简单的js代码来完成点击缩略图进行立方体旋转的操作。

由于该该3D立方体图片画廊特效中使用了CSS变量和CSS grid，所以不是所以浏览器都支持该特效。

使用方法

在页面中引入样式文件style.css。

HTML结构

该3D立方体图片画廊特效的HTML结构如下：

Javascript

然后在页面加载完毕之后，通过下面的js代码来完成点击缩略图旋转立方体的功能。

window.addEventListener("DOMContentLoaded", function () {

var cube = document.querySelector(".cube"),

imageButtons = document.querySelector(".image-buttons");

var cubeImageClass = cube.classList[1];

//Add click event listener to image buttons container

imageButtons.addEventListener("click", function (e) {

//Get node type and class value of clicked element

var targetNode = e.target.nodeName,

targetClass = e.target.className;

//Check if image input has been clicked and isn't the currently shown image

if (targetNode === "INPUT" && targetClass !== cubeImageClass) {

console.log("Show Image: " + targetClass.charAt(11));

//Replace previous cube image class with new class

cube.classList.remove(cubeImageClass);

cube.classList.add(targetClass);

//Update cube image class variable with new class

cubeImageClass = targetClass;

}

});

html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效相关推荐

HTML5七夕情人节表白网页(抖音3D立方体图像库) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音❤3D立方体图像库❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码程序员表白源码 3D旋转相册 js烟花代码 css爱心表白这是程序 ...
3D立方体旋转相册特效
3D相册,使用鼠标触碰图片,能看到3D旋转放大效果内叠加立方体特效.本相册使用了HTML5的画布技术,下载打开 guyu.html 需要谷歌浏览器或火狐浏览器等现代浏览器才能正常观看效果更佳! 文件: ...
HTML+CSS+JS实现 ❤️canvas 3D立体图片相册幻灯片❤️
HTML+CSS+JS实现 ❤️three 3D铅笔绘图工具特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: #mfPreviewBar {display: none !important; }html, body {position: fixed;o ...
html5立体照片墙效果,jQuery超酷3D网格照片墙动画特效 -HTML5功能
作为网格容器,和一个按钮来触发动画效果. Animate CSS样式在网格容器上设置了固定的宽度和高度,为了制作3D效果,还设置了perspective: 500px;.每一张图片也设置了固定的宽度 ...
HTML+CSS+JS实现 ❤️H5 3D传送带视差照片特效❤️
效果演示: 代码目录: 主要代码实现: 部分CSS样式: html, body, .stage, .ring, .img {width: 100%;height: 100%;transform-sty ...
html 图片滚动放大缩小,js实现图片旋转 js滚动鼠标中间对图片放大缩小
从开通博客园到今天,有两个多月了.我发现之前没有开通博客记录自己所做的东西,真是后悔啊. 现在一点一点把自己所做的功能以博客的形式记录下来,一方面可以给大家分享,大家一起学习,同时自己也从新回顾一下. ...
js生成html转换成图片保存,js将html生成为图片，并保存在本地
html生成图片的方式有很多种,有的需要下载安装插件,如phantomjs .显得未免麻烦了些,有的又是通过后台来实现的,但个人感觉没必要做这种交互,也没必要在服务端生成这些零时文件,那么问题来了,有 ...
【jQuery】jQuery与vue实现点击下载图片以及js实现批量打包下载图片
原理:用canvas的toDataUrl() API获取到图片的base64编码,再利用触发a标签事件进行下载.(单张图片下载) 多张图片批量下载导出压缩包需要引入jsZip jQuery实现点击下载 ...

html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效

html5 css3 图片画廊,js和CSS3 3D立方体图片画廊特效相关推荐

最新文章

热门文章