반응에서 그림 자리 표시자 모듈 구성 요소 구현에 대한 자세한 설명-JS 튜토리얼-php.cn

반응에서 그림 자리 표시자 모듈 구성 요소 구현에 대한 자세한 설명

小云云

풀어 주다： 2018-01-04 09:15:39

원래의

2075명이 탐색했습니다.

이 글에서는 주로 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={[&#39;#小图地址#&#39;, &#39;#大图地址#&#39;]}/> // img 传入数组形式。

로그인 후 복사

사진 무작위 표시 달성

사진이 많을 때 임의의 시간에 사진 표시를 하여 사진 표시 경험을 높일 수 있습니다
(함께 표시되면 정말 좀 보기 흉합니다)

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

로그인 후 복사

슬라이드쇼 효과

img 속성은 다음과 같을 수 있기 때문입니다. 배열로 전달되면 이론적으로 슬라이드쇼 효과를 얻기 위해 많은 사진을 로드할 수 있습니다.
wait 속성을 사용하여 각 이미지가 로드된 후 대기 시간을 설정하세요

 <ImageBoxView
 animate="fade" // 会触发动画样式(见下方样式部分 )
 wait="100" // 每张图片加载完后，继续加载下一张的时间（默认：0）
 mode="style" // 使用 style 去显示图片（默认:img）
 img={[&#39;#图片1#&#39;, &#39;#图片2#&#39;, &#39;#图片3#&#39;]}/> // 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;
 }
 
}

로그인 후 복사