画像のビフォー･アフターが出来るやつ

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">&lt;</span><span id="sld_r">&gt;</span></p>
</div>

via

びふぉーあふたー – jsdo.it

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

Result

jQuery

css

html

via

Resources & Tools

OSS

AI

CSS snippet

JavaScript snippet

WordPress Code