react实现一个优雅的图片占位模块组件详解

前言

发现项目中的图片占位模块写得很不优雅，找了一圈，发现没找到自己想要的图片组件。于是自己写了一个，写了一个还算优雅的图片组件：mult-transition-image-view

截图：

功能简介

首先它是一个比较优雅的组件：用起来不头疼。

第二个它能实现以下场景：

  • 没有图片的时候，显示一个占位图（可以直接用css来写背景，方便自定义）
  • 希望在加载大图的时候，能先占位一张小图，然后再过渡到一张大图。类似上面的截图。

使用方法

安装npm 包

npm install react-mult-transition-image-view

代码部分

 import ImageBoxView from 'react-mult-transition-image-view'

 <ImageBoxView img="#你的图片#"/>

当然 你可以设置其他属性

 <ImageBoxView
 width="320" //
 height="200" // 宽高，会转化成 style 属性
 mode="style" // 使用 style 去显示图片（默认:img）
 img="#你要的图片#"/> // 图片路径

小图过渡到大图的效果

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 mode="style" // 使用 style 去显示图片（默认:img）
 img={['#小图地址#', '#大图地址#']}/> // img 传入数组形式。

实现随机显示图片

当有很多图片的时候，可以让图片随机时间显示，增加图片显示出来的体验
（一起出来真的有点丑）

 <ImageBoxView
 delay="100" // 延迟加载（默认：0），可以传入一个随机数
 img="#你要的图片#"/> // 图片路径

幻灯片效果

因为 img 属性可以传入数组，所以 理论上可以加载很多图，实现幻灯片效果。
使用 wait 属性 来设置，每张图片加载后的等待时间

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 wait="100" // 每张图片加载完后，继续加载下一张的时间（默认：0）
 mode="style" // 使用 style 去显示图片（默认:img）
 img={['#图片1#', '#图片2#', '#图片3#']}/> // img 传入数组形式。

样式部分

别忘了样式部分

.c-img-box{
 display:inline-block;
 width: 320px;
 height: 200px;
 background: #f7f6f5;
 position: relative;
 .img-hold{
 overflow: hidden;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
 img{
  width:100%;
  height:100%;
 }
 &.img-animate{
  transition: opacity 0.5s;
 }
 }

 .img-cover{
 background: url('https://d.2dfire.com/om/images/menulist/7deb58da.default.png') no-repeat center/300px;
 background-color:#f0f0f0;
 }

 .img-cover,
 .img-hold,
 .img-hide{
 position: absolute;
 width: 100%;
 height: 100%;
 top:0;
 left:0;
 }

 .img-hide{
 opacity: 0;
 }

}

TODO

github: https://github.com/qilei0529/react-mult-transition-image-view

本地下载：http://xiazai.jb51.net/201710/yuanma/react-mult-transition-image-view(jb51.net).rar

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 基于Node的React图片上传组件实现实例代码

    基于Node的React图片上传组件实现实例代码

    写在前面 红旗不倒,誓把JavaScript进行到底!今天介绍我的开源项目 Royal 里的图片上传组件的前后端实现原理(React + Node),花了一些时间,希望对你有所帮助. 前端实现 遵循React 组件化的思想,我把图片上传做成了一个独立的组件(没有其他依赖),直接import即可. import React, { Component } from 'react' import Upload from '../../components/FormControls/Upload/' /

  • React中上传图片到七牛的示例代码

    之前有写过类似的一篇文章,有位同学突然找来解惑,发现自己采用了另外的一个方法,这里也分享下,希望对使用reactjs的同学有帮助. 逻辑思路是这样子的,在componentDidMount中实现更新dom的操作,异步加载需要的资源文件,然后在加载完后实现qiniu的初始化操作.这里就不需要在webpack或者其他打包工具中去引入qiniu的包文件,导致打完包的文件过大了. 我这里使用了nodejs的库scriptjs, const $S = require('scriptjs'); 可以实现异步

  • React+ajax+java实现上传图片并预览功能

    React+ajax+java实现上传图片并预览功能

    之前有在网上找ajax上传图片的资料,大部分的人写得都是用jQuery,但是在这里用JQuery就大才小用了,所以我就自己写了,先上图. 由上图,首先点击上面的选择文件,在选择图片之后,将会自动上传图片到服务器,并且返回图片名字和图片在服务器的路径,然后在页面显示文件名字和图片. 源码:ajax上传预览 React中: import React from 'react'; import Http from './http' const URL = 'http://localhost:8080/f

  • react实现一个优雅的图片占位模块组件详解

    react实现一个优雅的图片占位模块组件详解

    前言 发现项目中的图片占位模块写得很不优雅,找了一圈,发现没找到自己想要的图片组件.于是自己写了一个,写了一个还算优雅的图片组件:mult-transition-image-view 截图: 功能简介 首先它是一个比较优雅的组件:用起来不头疼. 第二个它能实现以下场景: 没有图片的时候,显示一个占位图(可以直接用css来写背景,方便自定义) 希望在加载大图的时候,能先占位一张小图,然后再过渡到一张大图.类似上面的截图. 使用方法 安装npm 包 npm install react-mult-tr

  • React如何利用相对于根目录进行引用组件详解

    前言 本文主要给大家介绍了关于React利用相对于根目录进行引用组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 在对自己开发的组件中经常会做诸如以下的引用: import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs'; import { parseQuery, stringifyQuery } from '../../../utils/query'; import

  • Python图像处理库PIL的ImageDraw模块介绍详解

    ImageDraw模块提供了图像对象的简单2D绘制.用户可以使用这个模块创建新的图像,注释或润饰已存在图像,为web应用实时产生各种图形. PIL中一个更高级绘图库见The aggdraw Module 一.ImageDraw模块的概念 1.  Coordinates 绘图接口使用和PIL一样的坐标系统,即(0,0)为左上角. 2.  Colours 为了指定颜色,用户可以使用数字或者元组,对应用户使用函数Image.new或者Image.putpixel.对于模式为"1","

  • webpack5 联邦模块介绍详解

    本文主要介绍webpack 5 的新特性之一 "module federation"(联邦模块),涉及联邦模块特性.使用方法.适用范围. 特性 webpack 5引入联邦模式是为了 更好的共享代码 . 在此之前,我们共享代码一般用npm发包来解决. npm发包需要经历构建,发布,引用三阶段,而联邦模块可以 直接引用其他应用代码 ,实现热插拔效果.对比npm的方式更加简洁.快速.方便. 使用方法 引入远程js webpack配置 模块使用 引入远程JS 假设我们有app1,app2两个应

  • 人工智能学习pyTorch的ResNet残差模块示例详解

    人工智能学习pyTorch的ResNet残差模块示例详解

    目录 1.定义ResNet残差模块 ①各层的定义 ②前向传播 2.ResNet18的实现 ①各层的定义 ②前向传播 3.测试ResNet18 1.定义ResNet残差模块 一个block中,有两个卷积层,之后的输出还要和输入进行相加.因此一个block的前向流程如下: 输入x→卷积层→数据标准化→ReLU→卷积层→数据标准化→数据和x相加→ReLU→输出out 中间加上了数据的标准化(通过nn.BatchNorm2d实现),可以使得效果更好一些. ①各层的定义 ②前向传播 在前向传播中输入x,过

  • JavaScript实现六种网页图片轮播效果详解

    JavaScript实现六种网页图片轮播效果详解

    目录 1.当鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 2.动态生成小圆圈 3.点击小圆圈,小圆圈变色 4.点击小圆圈滚动图片 5.点击右侧按钮一次,就让图片滚动一张. 6.点击右侧按钮, 小圆圈跟随变化 7.左侧按钮功能制作 8.自动播放功能 在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往左播放

  • python日志模块loguru详解

    python日志模块loguru详解

    目录 前言 使用步骤 安装库 简单使用方法 配置 异常追溯 总结 前言 在部署一些定时运行或者长期运行的任务时,为了留存一些导致程序出现异常或错误的信息,通常会才用日志的方式来进行记录这些信息.python内置的logging标准库博主是没用过,今天给大家介绍loguru,loguru 库的使用可以说是十分简单,希望通过本文大家再也不用通过print来排查代码了. 使用步骤 安装库 pip install loguru 简单使用方法 from loguru import logger logge

  • Python实现为图片添加水印的示例详解

    Python实现为图片添加水印的示例详解

    目录 1.引言 2.filestools介绍 2.1 安装 2.2 filestools 功能介绍 2.3 watermarker模块介绍 2.4 代码实例 补充 1.引言 小屌丝:鱼哥,这个周末过得咋样 小鱼:酸爽~ ~ 小屌丝:额~~ 我能想到的,是这样吗? 小鱼:有多远你走多远. 小屌丝:唉,鱼哥,你别说,我觉得这个图片,跟你平时的表情挺贴切的. 小鱼:你想咋的!!!! 小屌丝:突然想到,能不能给你来一个专属的图片,例如追加水印啥的,让别人无图可盗!! 小鱼:嘿~ 你别说,还真的可以哈,

  • python3中超级好用的日志模块-loguru模块使用详解

    目录 一. 使用logging模块时 二. loguru模块的基础使用 三. logurr详细使用 3.1 add 方法的定义 3.2 基本参数 3.3 删除 sink 3.4 rotation 配置 3.5 retention 配置 3.6 compression 配置 3.7 字符串格式化 3.8 Traceback 记录 一. 使用logging模块时 用python写代码时,logging模块最基本的几行配置,如下: import logging logging.basicConfig(

  • Angular2入门教程之模块和组件详解

    Angular2入门教程之模块和组件详解

    本文呢主要给大家介绍的关于Angular2模块和组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: 一.初步了解模块和组件 之前给大家介绍了构建工程,这篇文章简单讲述一下Angular2中的模块和组件. app文件夹下有五个文件,其中,app.component.spec.ts应该是和模块测试有关的文件,目前不用管它.剩下的四个文件就是典型的模块+组件的文件组成模式. Angular2应用由模块和组件构成,每个模块这样明明name.module.ts,组件则是name.compo

随机推荐