데모 : 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>
| 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 |