前端特效开发 | 点击查看大图相册效果

HTML5学堂(码匠):图片的展示是一个网站中最吸引人的区域,除了图片本身的内容精彩以外,常常还会有各种各样的展示形式。而对于前端开发来说,一个精美的图片展示效果也往往是需要花费很多时间来构思的,所以希望今天的缩略图相册展示对正在开发中的你会有所帮助~

本文主要内容

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 查看

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-19

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏快乐八哥

修复bootstrap daterangepicker中的3个问题

最近项目中使用了一个基于Bootstrap的daterangepicker控件。 1.点击页面其他空白的地方,会把之前在日历上选中的日期选择上。 具体描述: 1...

1905
来自专栏web开发

移动端图片放大滑动查看-插件photoswipe的使用

最近在开发项目的时候,遇到一个需求,需要移动端实现放大查看图片的功能,然后我就在网上搜索了一下资料,看到了photoswipe这个插件,后来试了试,确实挺好用的...

2925
来自专栏林德熙的博客

本文说如何显示SVG

这些图片在http://www.zcool.com.cn/,不知道是不是不能直接用 我们需要一个看起来不会模糊,因为矢量图,所以我们就使用svg,其实png也...

352
来自专栏移动开发

关于 CheckBox 你或许不知道的一些知识点

重点是 android:button=”@null” 和 android:drawableRight=”?android:attr/listChoiceInd...

1155
来自专栏DeveWork

【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新,访问主页你会看到首屏的Low-Poly 背景(每次刷新都不同),这个效果就是利用了...

1968
来自专栏张善友的专栏

Mono 2.0正式发布了

Mono官网:http://mono-project.com/ 2.0 Release Notes: http://www.mono-project.com/...

19310
来自专栏ionic3+

【技巧】ionic3视频播放

一般视频的展示方式有两种:缩略图和直接播放,分别对应下面两种效果(可参考直播应用和今日头条视频):

1203
来自专栏大神带我来搬砖

用自动化测试工具selenium来揭露骗局的真相selenium进行页面滚动关闭chrome浏览器自动加载图片使用headless模式运行chrome删除页面上元素爬取结果分析源码

前几天写了用爬虫来揭露约稿骗局的真相,但实际上对于动态加载的数据来说,用程序爬取比较困难,在这种情况下,可以使用selenium来模拟浏览器行为,达到同样目的。

762
来自专栏王磊的博客

react native android6+拍照闪退或重启的解决方案

前言 android 6+权限使用的时候需要动态申请,那么在使用rn的时候要怎么处理拍照权限问题呢?本文提供的是一揽子rn操作相册、拍照的解决方案,请看正文...

2989
来自专栏飞雪无情的博客

Android设计应用图标不用愁---Asset Studio Integration来帮你

Android Asset StudioWeb版是一个非常好用的Andrid图标资源设计工具,它是由RomanNurik开发的。现在我们已经在ADT14里支持同...

955

扫码关注云+社区