테이블에 흩어져 있는 비 jQuery 구현 사진, LightBox effect_javascript 기술을 확대하려면 클릭하세요.-JS 튜토리얼-php.cn

렌더링은 다음과 같습니다

데모 주소http://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

구현 원리는 매우 간단하며 기본 html은 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

~                                                                 2평영
> ~ ~                                  ~ | src="img/thumbs/farm.jpg">
~                                           농장
> ~ ~

~ 반호프
> ~
…

먼저 식탁보를 정의합니다. 즉, div id="gallery"

그런 다음 사진 앨범의 세로 열을 순서대로 배열하고 div class="item" 내부에 링크로 사진을 묶습니다

다음으로 사진의 분산 효과를 구현해야 합니다.

코드 복사

코드는 다음과 같습니다.

$k(함수() {

$k('.item', $k('#gallery')).each(function() {

$k(this).css({

상단 : $kit.math.rand($k('#gallery').innerHeight()) 'px',

왼쪽 : $kit.math.rand($k('#gallery').innerWidth()) 'px',

'-webkit-transform': 'rotate(' $kit.math.rand(-40, 40) 'deg)' }); })

여기서 $k는 jQuery의 $와 유사한 kit의 작성 방법입니다. API는 완전히 동일합니다. 이 코드의 의미는 모든 항목의 div를 찾아 절대 위치로 설정하고 식탁보를 사용하는 것입니다. 높이와 너비를 난수로 생성하고 배열하는 경우 CSS3의 고유한 회전 효과'rotate 속성을 사용하여 특정 각도를 회전할 수 있습니다

이제 사진이 퍼지기 시작하여 그림 1의 효과가 나타납니다. 다음으로 LightBox 효과를 적용해 보겠습니다.

코드 복사 코드는 다음과 같습니다.

$k(함수() {

$k('.item', $k('#gallery')).each(function() {

$k(this).css({

상단 : $kit.math.rand($k('#gallery').innerHeight()) 'px',

왼쪽 : $kit.math.rand($k('#gallery').innerWidth()) 'px',

'-webkit-transform': 'rotate(' $kit.math.rand(-40, 40) 'deg)'

});

}).pushStack('a.kitLightBox').each(function() {

새로운 $kit.ui.LightBox({

엘 : 이거

}).init();

});

});

전체 코드는 위와 같습니다. 각 이미지의 링크는 kitjs의 라이트박스 UI 위젯을 사용하여 인스턴스화하면 얻은 효과를 클릭하면 이미지가 애니메이션 효과와 함께 큰 이미지로 열립니다. ^_^모두 즐거운 이용되시기 바랍니다!

LightBox 소스 코드 https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

사진 분산 효과 소스 코드 https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

이 글은 KITJS 프레임워크를 기반으로 작성되었습니다. 잘 모르신다면 다음 글에서 이 훌륭한 js 프레임워크를 자세히 소개하겠습니다.