이미지의 비포 애퍼터를  구현할때 편하고 아주 맘에 드는 플로그인 입니다.

사용자 삽입 이미지

데모 : https://youngsam.net/PHP/01/twentytwenty-master/index.html

위 데모를 보시면 됩니다 사용범도 간단합니다.


상단에 
<link href = "css / twentytwenty.css"rel = "stylesheet"type = "text / css"/>
<script type = "text / javascript"src = "js / jquery.js"> </ script>
<script type = "text / javascript"src = "js / jquery.event.move.js"> </ script>
<script type = "text / javascript"src = "js / jquery.twentytwenty.js"> </ script>
<script type = "text / javascript">
	$ (window) .load (function () {
		$ ( '. container'). twentytwenty ({ default_offset_pct : 0.5 });
	});
</ script>
지정해주고 .. 표현 하고 싶은곳에  아래 소스

id='container1' class='twentytwenty-container'>
  <img src='sample-before.png'>
  <img src='sample-after.png'>
</div>
원본 링크 : https://zurb.com/playground/twentytwenty

Name Default Value
$pluginPrefix twentytwenty
$twenty20-handle-color #fff
$twenty20-handle-stroke 3px
$twenty20-handle-circle-width 38px
$twenty20-handle-box-shadow 0px 0px 12px rgba(#333,0.5)
$twenty20-handle-triangle-color $twenty20-handle-color
$twenty20-handle-triangle-size 6px
$twenty20-handle-triangle-position 5px
$twenty20-handle-radius 1000px
$twenty20-overlay-bg rgba(#000,0.5)
$twenty20-overlay-label-color #fff
$twenty20-overlay-label-bg rgba(#fff, .2)
$twenty20-overlay-label-height 38px
$twenty20-overlay-label-padding 20px
$twenty20-overlay-label-font-size 13px
$twenty20-overlay-label-letter-spacing 0.1em
$twenty20-label-radius 2px
2018/08/11 20:49 2018/08/11 20:49

Trackback Address :: 이 글에는 트랙백을 보낼 수 없습니다