gallery
效果如下
目录如下
代码如下：
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>照片库</title>
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>
</head>
<body>
<h1>照片库</h1>
<div class="full-img">
<img class="displayed-img" src="images/pic1.jpg">
<div class="overlay"></div>
<button class="dark">变暗</button>
</div>
<div class="thumb-bar"></div>
</body>
</html>
//main.js
const displayedImage = document.querySelector('.displayed-img');
//缩略图库
const thumbBar = document.querySelector('.thumb-bar');
const btn = document.querySelector('button');
const overlay = document.querySelector('.overlay');
/* 遍历图片并添加至缩略图区 */
for(let i = 1; i <= 5; i++) {
const newImage = document.createElement('img');
newImage.setAttribute('src', 'images/pic' + i + '.jpg');
thumbBar.appendChild(newImage);
newImage.onclick = e => {
const imgSrc = e.target.getAttribute('src');
//大图
displayedImage.setAttribute('src', imgSrc);
};
}
/* 编写 变亮/变暗 按钮 */
btn.onclick = () => {
//这种方式机智哇
const btnClass = btn.getAttribute('class');
if(btnClass === 'dark') {
btn.setAttribute('class', 'light');
btn.textContent = '变亮';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
} else {
btn.setAttribute('class', 'dark');
btn.textContent = '变暗';
overlay.style.backgroundColor = 'rgba(0, 0, 0, 0)';
}
};
gallery的更多相关文章
- 使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
在很多情况下,我们网站可能会展示我们的产品图片.以及教程视频等内容,结合一个比较好的图片.视频展示插件,能够使得我们的站点更加方便使用,也更加酷炫,在Github上有很多相关的处理插件可以找来使用,有 ...
- 备忘-Android ViewPager 与Gallery滑动冲突解决方法
解决方法,重新定义gallery,禁止触发pager的触摸事件 1 public class UserGallery extends Gallery implements OnGestureListe ...
- Android Gallery
xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...
- S Gallery – 很有特色的响应式 jQuery 相册插件
S Gallery 是一款响应式的 jQuery 相册插件.使用了 HTML5 全屏 API 以及 CSS3 动画 和 CSS3 转换,所以只能在支持这些功能的浏览器中使用. 这款插件它有一个特色功能 ...
- 解决在android开发中ViewPager中Gallery无法滑动问题
我的是在viewpager中某个fragment中有gallery... 导致无法滑动,网上找到解决方法. 自定义Gallery. 代码: import android.content.Context ...
- 25个最佳的 WordPress Gallery 画廊插件
WordPress 画廊插件最适合用于作品展示网站,特别对于那些想以一个奇特的,现代的方式展示他们作品的摄影师.如果你想为你安装 WordPress Gallery 插件,那么下面的是你想要的. 本文 ...
- Android 从Gallery获取图片
本文主要介绍Android中从Gallery获取图片 设计项目布局 <LinearLayout xmlns:android="http://schemas.android.com/ap ...
- Android -- ImageSwitch和Gallery 混合使用
1. 实现效果
- jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
- android中无限循环滑动的gallery实例
android中无限循环滑动的gallery实例 1.点击图片有变暗的效果,使用imageview.setAlpha(),并且添加ontouchListener public void init() ...
随机推荐
- 在linux命令下访问url
1.elinks - lynx-like替代角色模式WWW的浏览器 例如: elinks --dump http://www.baidu.com 2.wget 这个会将访问的首页下载到本地 [root ...
- js 首次进入弹窗
今天有个需求,首次进入需要弹窗,然后就在网上找了下,虽然看了很多但是说的都不是我想要的,最后终于到了一个合适的. function get_cookie(Name) { var search = Na ...
- 阿里云 ECS 安全组
以前在案例云买的ECS我一般都是 连上 ssh,然后把网站文件拿上去 ,安装好需要的环境 然后就可以顺利的打开网站了,这次帮一个朋友买的阿里云ECS让我蒙了, 一切都准备好了 网站打不开 防火墙也检查 ...
- Ubuntu Firefox HTML5
sudo apt-get install ubuntu-restricted-extras
- javax.validation.UnexpectedTypeException: HV000030: No validator could be found for constraint-实体报错
使用hibernate validator出现上面的错误, 需要 注意 @NotNull 和 @NotEmpty 和@NotBlank 区别 @NotEmpty 用在集合类上面@NotBlank 用 ...
- nodejs zip 安装配置
1.下载 下载地址:https://nodejs.org/zh-cn/download/ 选择相应的版本下载 2.解压缩 将文件解压到要安装的位置,并新建两个目录 node-global :npm全局 ...
- solr单机版搭建
需要把solr服务器安装到linux环境: 第一步:安装linux.jdk.tomcat. [root@bogon ~]# ll total 8044 -rw-r--r--. 1 root root ...
- linux-shell系列5-统计
#!/bin/bashshow=$(service --status-all 2>/dev/null | grep -E "is running|正在运行"|awk '{pr ...
- prufer序列
介绍 其实是\(pr\ddot{u}fer\)序列 什么是prufer序列? 我们认为度数为\(1\)的点是叶子节点 有一颗无根树,每次选出编号最小的叶子节点,加到当前prufer序列的后面,然后删掉 ...
- 【BZOJ1007】【HNOI2008】水平可见直线 几何 单调栈
题目大意 给你\(n\)条直线\(y=kx+b\),问你从\(y\)值为正无穷大处往下看能看到那些直线. \(1\leq n\leq 500000\) 题解 如果对于两条直线\(l_i,l_j\),\ ...