react 우아 한 이미지 차지 모듈 구성 요소 상세 설명 실현

머리말
프로젝트 의 그림 점유 모듈 이 우아 하지 않 게 쓰 여 있 는 것 을 발견 하고 한 바퀴 돌 았 는데 자신 이 원 하 는 그림 구성 요 소 를 찾 지 못 했다.그래서 스스로 하 나 를 썼 고 우아 한 그림 구성 요 소 를 썼 습 니 다:mult-transition-image-view
캡 처:

기능 소개
우선 그것 은 비교적 우아 한 구성 요소 이다.사용 하면 머리 가 아 프 지 않다.
두 번 째 는 다음 과 같은 장면 을 실현 할 수 있다.

그림 이 없 을 때 비트 맵 을 표시 합 니 다(css 로 배경 을 직접 쓸 수 있 고 사용자 정의 가 편리 합 니 다)

4.567917.큰 그림 을 불 러 올 때 작은 그림 을 먼저 차지 한 다음 에 큰 그림 으로 넘 어 갈 수 있 기 를 바 랍 니 다.위의 캡 처 와 유사 합 니 다사용 방법
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
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

react 우아 한 이미지 차지 모듈 구성 요소 상세 설명 실현

좋은 웹페이지 즐겨찾기