前端特效开发 | 点击查看大图相册效果
本文主要内容
1. 效果展示
2. 实现的原理分析
3. 案例实现
1. 效果展示
如上的效果中,作为用户,你可以通过悬停鼠标在相应的缩略图上,即可查看到相应的缩略图位置动画效果,这也是对于用户选择的一种提醒。然后通过点击相应的缩略图,左侧的大图区域即可切换出与缩略图一致的大图展示效果,以获取对应的图片照看状态。通过查看效果,对于它的实现我们又该如何操作呢?一起来分析下吧~~~
2. 实现的原理分析
2.1 结构与样式搭建
结构的搭建看起来很简单,总共分为左侧大图展示与右侧缩略图展示两个区域。但是实际书写时配合上一个合适的背景、阴影之后,用到的结构就相对多了一些层级。而针对样式的书写,大体上只需要保证图片的大小与外层容器的大小一致即可。因为后面为了实现预载的形式,所以在使用图片时存储了两张,一张用来展示缩略图,一张用来获取其地址,然后再切换时把地址参数传给左侧的大图区域。
2.2 功能逻辑分析
首先让左侧的大图区域展示一个初始化图片,即直接传递一张图片来使用;
然后借助JQ的hover为右侧的缩略图添加鼠标悬停时的动画提示状态;
最后实现点击图片切换与大图展示的功能,同时对图片的展示做加载处理。
3. 案例实现
3.1 图片的加载
在结构的搭建中,右侧缩略图区域存储了两张一样的图片,一张用以缩略图展示,而另外一张即是用来做预载处理。此时借助在页面载入的时候获取其图片地址,然后通过实例化img设置相应的图片地址,最后以这个图片地址对应的图片为左侧大图区域设置背景,从而展示出相册展示的效果。具体的代码如下:
var default_image = "http://img.h5course.cn/codepen/2017.01.19.01.jpg";
/*加载默认图像*/
loadPhoto(default_image);
function loadPhoto(url) {
/*图像预加载*/
var img = new Image();
$(img).attr({ "src": url });
$("#largephoto").css({
"background-image": 'url("' + url + '")'
});
}
3.2 实现悬停时缩略图提示
实现缩略图在鼠标悬停时的效果是借助了JQ的hover函数,为用户在鼠标移入的时候,实现缩略图标的位置变化,以及变化透明蒙版层的背景定位,实现闪动效果,值得注意的一点是,在实现闪动时需要对这个闪动动画做清动画的处理(如下代码中)。在用户鼠标移开时,让缩略图回到初始位置。其具体效果代码如下所示:
/* 当鼠标悬停在缩略图上时*/
$(".thumb-container").hover(function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "-7px",
"marginTop": "-7px"
}, 200);
$(this).find(".large-thumb-shine").stop();
$(this).find(".large-thumb-shine").css({
"background-position-x": "-100px"
});
$(this).find(".large-thumb-shine").animate({
"background-position-x": "100px"
}, 700);
}, function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "0px",
"marginTop": "0px"
},200);
});
3.3 缩略图对应的大图展示
实现图片相册的核心功能就在于用户点击相应的缩略图,然后在大图的区域展示对应的图片。此时只需要获取到在缩略图结构中存放的第二张图片的地址,然后调用图片载入函数loadPhoto(),对其传入相应的图片地址,为左侧的大图区域设置背景图即可。这样一个简单的缩略图相册查看功能即可实现,具体功能代码如下:
/* 单击缩略图时*/
$(".thumb-container").click(function() {
var handler = $(this).find(".large-image");
var newsrc = handler.attr("src");
loadPhoto(newsrc);
});
3.4 成品代码
<div id="container">
<!-- 左侧大图展示区域 -->
<div id="largephoto">
<div id="largetrans"></div>
</div>
<!-- 右侧缩略图区域 -->
<div class="thumbnails">
<h2>缩略图相册展示</h2>
<!-- 缩略图1展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (26).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (26).jpg" class="large-image">
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图2展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (73).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (73).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图3展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (102).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (102).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图4展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (44).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (44).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图5展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (57).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (57).jpg" class="large-image">
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图6展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (61).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (61).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图7展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (81).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (81).jpg" class="large-image"/>
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图8展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (100).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (100).jpg" class="large-image" />
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
<!-- 缩略图9展示的开始-->
<div class="thumbnailimage">
<div class="thumb-container">
<div class="large-thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (118).jpg" class="large-thumb-image" alt="thumb">
<img src="http://img.h5course.cn/codepen/HTML5学堂(码匠)-素材图 (118).jpg" class="large-image" />
<div class="large-thumb-border"></div>
<div class="large-thumb-shine"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
/*相册使用的欢迎图片*/
var default_image = "http://img.h5course.cn/codepen/2017.01.19.01.jpg";
/*加载默认图像*/
loadPhoto(default_image);
function loadPhoto(url) {
/*图像预加载*/
var img = new Image();
$(img).attr({ "src": url });
$("#largephoto").css({
"background-image": 'url("' + url + '")'
});
}
/* 单击缩略图时*/
$(".thumb-container").click(function() {
var handler = $(this).find(".large-image");
var newsrc = handler.attr("src");
loadPhoto(newsrc);
});
/* 当鼠标悬停在缩略图上时*/
$(".thumb-container").hover(function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "-7px",
"marginTop": "-7px"
}, 200);
$(this).find(".large-thumb-shine").stop();
$(this).find(".large-thumb-shine").css({
"background-position-x": "-100px"
});
$(this).find(".large-thumb-shine").animate({
"background-position-x": "100px"
}, 700);
}, function() {
$(this).find(".large-thumb").stop().animate({
"marginLeft": "0px",
"marginTop": "0px"
},200);
});
});
</script>
总结
如上,大图相册查看效果已完成,其主要功能就是为了实现大图片的展示功能,来满足用户对于图片的更细致体验。而作为前端开发者,掌握各种图片的展示方式,会为开发提升不少的效率,所以大家如果还有更新颖的、精美的展示方式也可以与小编一起分享。
由于篇幅过长,所以部分效果的样式大家可以在http://codepen.io/majiang/pen/zNoeZX 查看
- 46. 实现一个简单的网络爬虫 | 厚土Go学习笔记
- 45. sync.Mutex 互斥和互斥锁 | 厚土Go学习笔记
- golang进度条
- 44. goroutine、channel、time的例子 | 厚土Go学习笔记
- AVL二叉树
- Golang:使用 httprouter 构建 API 服务器
- dataguard中需要注意的一些数据文件操作(r8笔记第21天)
- 42. select 的默认分支 | 厚土Go学习笔记
- 执行计划变化导致CPU负载高的问题分析 (r8笔记第20天)
- 数据结构基础(2) --顺序查找 ; 二分查找
- 数据结构基础(1) --Swap ; Bubble-Sort ; Select-Sort
- 使用 Go 语言完成 HTTP 文件上传与下载
- 运维平台的建设思考-元数据管理(四)(r8笔记第16天)
- JavaWeb21-基础加强(注解;代理;类加载器;泛型反射
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第4章 Jenkins系统用户认证配置管理
- 回答公众号留言的2个关于相关性分析的问题
- css 透明度和百分比对应值
- Qt项目DeskGirl开发
- 三日php之路 -- 第二,三天(php知识要点)
- GitLabRunner和流水线的数据采集与监控
- FPGA开源工具链
- 电脑软件(例如 Adobe、Autodesk)为什么那么容易被破解?
- 额 明天接着修改
- Java中Map,List与Set的区别
- 排序算法
- 将Js数组对象中的某个属性值升序排序,并指定数组中的某个对象移动到数组的最前面
- 想学习Spark?先带你了解一些基础的知识
- 七日Python之路--第五天(之Django官方文档)
- Selenium 学习