这篇博客介绍了一种使用JavaScript创建3D相册的方法。通过HTML、CSS和复杂的JS代码，作者实现了视觉效果丰富的3D展示。尽管JS代码较为冗长，目前作者还未找到简化代码的途径。
页面显示：
HTML代码：
|
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Phase Box</title> <link rel="stylesheet" href="style.css"> </head>
<body> <div id="box"> <img id="img1" src="image/4.jpeg" alt=""> <img id="img2" src="image/2.jpg" alt=""> <img id="img3" src="image/7.jpg" alt=""> <img id="img4" src="image/1.jpg" alt=""> <img id="img5" src="image/6.jpg" alt=""> <img id="img6" src="image/8.jpg" alt=""> <img id="img7" src="image/3.jpeg" alt=""> <img id="img8" src="image/5.jpg" alt=""> <img id="img9" src="image/9.jpg" alt=""> <img id="img10" src="image/10.jpg" alt=""> </div> <div id="Img"> </div> <p class="top">点击图片可单独看那张图喔！</p> <script src="jquery-3.3.1.min.js"></script> <script src="script.js"></script> </body> </html> |
CSS代码：
|
@charset "utf-8"; /* CSS Document */ *{ padding: 0; margin: 0;} .top{ position: relative; width: 100%; color: #fff; font-size: 30px; text-align: center; } img{ width: 300px; height: 300px; cursor:pointer; } body,html{ height:100%; } /* 背景图片在这里设置 */ body{ background-image: url(image/11.jpeg); background-size: 100% 100%; } #box{ width: 22%; |
最低0.47元/天 解锁文章
扫一扫
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
