专栏首页java学习html实现一个电子相册

html实现一个电子相册

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>family</title>
<link rel="shortcuticon" type="text/javascript">
<style type="text/css">
* {
 margin: 0;
 padding: 0;
}
body {
 background-color: #666;
}
.book {
 width: 260px;
 height: 440px;
 background-color: rgba(255, 0, 0, .5);
 position: relative;
 margin: 150px auto;
 transform-style: preserve-3d;
 /*近大远小的效果*/
 perspective: 1200px;
}
/*.book:hover#page1{*/
/*transition:2s;*/
/*transform:rotateY(-145deg);*/
/*}*/
#page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9,#page10,#page11,#page12
    {
 transform-origin: left;
 transform-style: preserve-3d;
 position: absolute;
 left: 0;
 top: 0;
 height: 440px;
 width: 320px;
}
#page1 {
 z-index: 12;
}
#page2 {
 z-index: 11;
}
#page3 {
 z-index: 10;
}
#page4 {
 z-index: 9;
}
#page5 {
 z-index: 8;
}
#page6 {
 z-index: 7;
}
#page7 {
 z-index: 6;
}
#page8 {
 z-index: 5;
}
#page9 {
 z-index: 4;
}
#page10 {
 z-index: 3;
}
#page11 {
 z-index: 2;
}
#page12 {
 z-index: 1;
}
.page-front {
 width: 320px;
 height: 440px;
 background-color: greenyellow;
 /*line-height: 300px;*/
 text-align: center;
 font: bold28px/440px Arial;
 backface-visibility: hidden;
 border: 10px solid#fff;
}
.page-back {
 width: 320px;
 height: 440px; 
 background-color: #f0f0f0;
 border: 10px solid#fff;
 frontface-visibility: visible;
 transform: rotateY(180deg);
}
.page-front,.page-back {
 position: absolute;
 left: 0;
 top: 0;
 box-sizing: border-box;
 z-index: 0;
}
img {
 width: 300px;
 height: 420px; /*照片的大小*/
}
</style>
</head>
<body>
 <div class="book">
 <div id="page1">
 <div class="page-back"></div>
 <div class="page-front">
 <pre style=" font: bold 28px Arial;">
HeyBoy!
Welocom To ! 
BigFamily !
 </pre>
 </div>
 </div>
 <div id="page2">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="IMG_0003.JPG" />
 </div>
 </div>
 <div id="page3">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="IMG_0381.JPG" />
 </div>
 </div>
 <div id="page4">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="IMG_0069.JPG" />
 </div>
 </div>
 <div id="page5">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="IMG_0705.JPG" />
 </div>
 </div>
 <div id="page6">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="IMG_0908.JPG" />
 </div>
 </div>
 <div id="page7">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun7.jpg" />
 </div>
 </div>
 <div id="page8">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun8.jpg" />
 </div>
 </div>
 <div id="page9">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun9.jpg" />
 </div>
 </div>
 <div id="page10">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun10.jpg" />
 </div>
 </div>
 <div id="page11">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun11.jpg" />
 </div>
 </div>
 <div id="page12">
 <div class="page-back"></div>
 <div class="page-front">
 <img src="images/jun12.jpg" />
 </div>
 </div>
 </div>
 <script type="text/javascript">
       var currentIndex = 0;
 var pagesDome = document.querySelectorAll("[id^='page']");
 var pageNum = pagesDome.length;
 var bookDom = document.querySelector(".book");
       bookDom.onclick= function(ev) {
 if (currentIndex > pagesDome.length - 2) {
 for ( var i = 0; i < pageNum; i++) {
                  pagesDome[i].style.transform= "rotateY(0deg)";
              }
              currentIndex= 0;
           } else {
 //        单击翻页
              pagesDome[currentIndex].style.transition= "2s";
              pagesDome[currentIndex].style.transform= "rotateY(-145deg)";
              currentIndex++;
           }
       }
 </script>
</body>
</html>

本文分享自微信公众号 - java学习(javaxxf),作者:许肖飞

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-08-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaEE就业学习路线(给初学者以及自学者一个学习方向)

    第一节java入门 1-Java 背景介绍 2-Java 入门程序的编写 3-环境配置 4-基本概念介绍 5-类型转换 6-开发工具使用 第二节java基础 1...

    Java学习
  • servlet实现文件上传功能

    最新通知 ●回复"每日一练"获取以前的题目! ●【新】Android视频更新了!(回复【安卓视频】获取下载链接) ●【新】Ajax知识点视频更新了!(回复【学习...

    Java学习
  • File 类与文件操作

    1 File类与文件操作就 输入/输出的英文单词是Input/Output, 因此,输入/输出操作通常简称为I/O操作。Java的I/o类和接口主要包含在jav...

    Java学习
  • 解决子级css float 浮动而父级高度没有自适应导致子级溢出父级的问题

    飞奔去旅行
  • 九宫格抽奖

    wade
  • css 关于图片上显示文字

    图片上显示文字,现在有很多主流的方法,最常用的就是position设置为relative或者absolute。

    陨石坠灭
  • 【可视化】Vue基础

    Vue框架,框架的作者,尤雨溪,组件化,快速开发的特点。 生命周期 beforeCreate:组件刚刚被创建 created:组件创建完成 生成

    达达前端
  • 纯CSS制作多扇区饼图和环形图

    近期在做一个小程序的时候,需要显示重要位置显示几个饼图。遇到这种情况,第一想法就是上网搜索各种小程序支持的图表控件。最终也选择了小程序版本的EChart...

    无忧无忌
  • Vue实践--指令

    1. v-text     v-text主要用来更新textContent,可以等同于JS的text属性。

    问天丶天问
  • CSS动效集锦,视觉魔法的碰撞与融合(三)

    在一些杀毒或文件扫描类的软件上,我们可能会看到一些雷达扫描的UI样式,例如下图所示

    外婆的彭湖湾

扫码关注云+社区

领取腾讯云代金券