Result
jQuery
var slide = ( function (){ //画像の最大値と最小値 var minX = 0; var maxX = 500; //画像の位置を動的なものに対応する return function (_x){ var offset = $( "#r" ).css( "left" ); offset = offset.slice(0,offset.indexOf( "px" ))*1; offset = offset + _x; var offset2 = $( "#r" ).css( "width" ); offset2 = offset2.slice(0,offset2.indexOf( "px" ))*1; offset2 = offset2 + (_x*-1); if (offset > minX && offset < maxX){ $( "#r" ).css({ left:offset+ "px" , width:offset2+ "px" }); $( "#r img" ).css({ marginLeft:-offset+ "px" }); $( "#sld" ).css({ left:offset+ "px" }); }; } })(); $( function (){ //マウスイベントの処理とか $( "#sld span" ).bind( "mousedown" , function (e){ var _x = e.pageX; $( "#comparing" ).bind( "mousemove" , function (e){ slide(e.pageX - _x); _x = e.pageX; }); $( "#comparing" ).bind( "mouseup" , function (e){$( this ).unbind()}); }); }); |
css
#comparing{ position : relative ; width : 500px ; height : 375px ; margin : 10px 0 0 10px ; overflow : hidden ; -webkit-user-select: none ; -moz-user-select: none ; } #comparing p{ display : block ; position : absolute ; } img{ border : 1px solid red ;} #l{ width : 500px ; height : 375px ; } #r{ width : 250px ; overflow : hidden ; height : 375px ; left : 250px ; } #r img{ margin-left : -250px } #sld{ left : 250px ; top : 50% ; width : 40px ; height : 25px ; margin : -22px 0 0 -22px ; border : 1px solid red ; } #sld:after{ clear : both } #sld span{ width : 20px ; height : 25px ; display : block ; color : #FFF ; line-height : 25px ; text-align : center ; background : #444 ; } #sld span::selection{ background : none ; } #sld_l{ cursor : w-resize ; float : left ; } #sld_r{ cursor : e-resize ; float : right ; } |
html
< div id = "comparing" > < p id = "l" >< img src = "befor.jpg" ></ p > < p id = "r" >< img src = "after.jpg" ></ p > < p id = "sld" >< span id = "sld_l" ><</ span >< span id = "sld_r" >></ span ></ p > </ div > |
via
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7