html 实现相册

相册实现效果如图：

html和css及js 代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>石健涛</title>

</head>
<body>
<style>
body{
background: url(images/bg.jpg);
background-size: cover;
/*overflow: hidden;*/
}
#piclist{
width: 750px;
height: 560px;
margin: 35px auto;

}

#piclist img{
width: 230px;
height: 160px;
padding: 5px;
border: 5px solid black;
float: left;
display: block;
/*设置为3D元素*/
transform-style: preserve-3d;
/*过度*/
transition: 2s;
/*阴影*/
box-shadow: 0px 0px 20px black;
}

#piclist img:hover{
transform: rotateY(360deg);
}

#mask{
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background: #000000;
/*透明度*/
opacity: 0.5;
/*隐藏*/
display: none;
}
/*图片展开部分*/
#show{
display: none;

}
#showImage{
width: 650px;
height: 450px;
position: absolute;
left: 50%;
top: 70px;
box-shadow: 0px 0px 20px black;
margin-left: -325px;
}
#showImage img{
width: 650px;
height: 450px;
position: absolute;
border:5px solid black;

}
#show span{
width: 50px;
position: absolute;
height: 80px;
box-shadow: 0px 0px 20px black;// 0：阴影水平偏移值（可取正负值）； 0px：阴影垂直偏移值（可取正负值）； 0px：阴影模糊值； rgba(0,0,0,0.8)：阴影颜色；
z-index: 20px;//层级
border-radius: 10px;//边框圆角
color: black;
text-align: center;
line-height: 80px;

}
#next{
right: 110px;
top: 230px;

}
#pre{
left: 100px;
top: 230px;
}

</style>
<div id="piclist">
<img src="data:images/main/1.jpg" />
<img src="data:images/main/2.jpg" />
<img src="data:images/main/3.jpg" />
<img src="data:images/main/4.jpg" />
<img src="data:images/main/5.jpg" />
<img src="data:images/main/6.jpg" />
<img src="data:images/main/7.jpg" />
<img src="data:images/main/8.jpg" />
<img src="data:images/main/9.jpg" />
</div>
<div id="mask"></div>
<div id="show">
<div id="showImage">
<img src="data:images/show/1/1.jpg">
<img src="data:images/show/1/2.jpg">
<img src="data:images/show/1/3.jpg">
<img src="data:images/show/1/4.jpg">
<img src="data:images/show/1/5.jpg">
</div>
<span id="prev"><</span>
<span id=next"">></span>
</div>
<script src="js/jquery-1.11.3.js"></script>
</body>
</html>

转载于:https://www.cnblogs.com/taoda/p/9363104.html

html 实现相册相关推荐

动态图相册 android,‎App Store 上的“动态图相册”
累计1000+"真实"五星好评 9大核心功能:GIF播放.GIF保存.GIF分享.GIF压缩.文件夹管理.全网GIF搜索.全网GIF浏览.导入导出.GIF制作累计1000+&qu ...
android 本地图片uri格式不一致,Android本地相册图片URI转换绝对路径
最近做毕设的时候遇到了这个问题,一直给我报错java.io.notFound啥的啥的,不管怎么修改路径都是报这个错误,今天终于解决了,记录一下解决过程. 首先我们调用系统相册. Intent inte ...
iOS 相册和网络图片的存取
iOS 相册和网络图片的存取保存 UIImage 到相册 UIKit UIKit 中一个古老的方法,Objective-C 的形式 void UIImageWriteToSavedPhotosAlb ...
JQUERY搞的相册导航DEMO教学，总有一款合心意
JQUERY搞的相册导航DEMO教学,总有一款合心意偶然看到的,老外小结的,用jquery搞的相册导航,总有一款合心意,25款哦 http://vandelaydesign.com/blog/web ...
Hexo Next 博客添加相册瀑布流
原文:https://rebootcat.com/2020/09/19/nextphotowall/ 前言一直没有时间来整理下博客搭建的一些事情,现在补上一篇,给 Hexo Next 博客添加一个相 ...
android调用相册和摄像头,调用Android摄像头与打开相册
以下为代码块: package com.example.demo; import java.io.File; import android.annotation.TargetApi; import a ...
iphone相册怎么加密_iphone相册加密码锁，保护隐私
在以往很多使用iphone的小伙伴都会遇到一个难题,在不越狱的情况下进行给相册进行设置密码锁,这是一个无法完成的目标,在前几期也为大家分享了相册照片加密方法,但是用起来很是不方便,今天就为大家分享利用 ...
访问系统相册或调用摄像头
头文件:#import <MobileCoreServices/MobileCoreServices.h> 协议:<UINavigationControllerDelegate, U ...
iOS 生成带 logo 的二维码，区域截屏保存至相册（小功能二连发 (一)）
原文链接:http://www.jianshu.com/p/36e9f012ef39 生成带 logo 的二维码区域截屏相关 -- 由3033分享开篇最近项目需要搞了几个相对独立的小功能,今天有 ...
微信小程序（canvas）画图保存到本地相册（wepy）
html标签部分因为这个需要用户授权所以需要使用button,画布使用的是canvas,这个可以参考小程序官方文档,代码如下 <button class='btn' type="d ...

html 实现相册

html 实现相册相关推荐

最新文章

热门文章