Question

我正试图让this plug in工作，但有些事情是不对的。

这是问题所在：http://www.youtube.com/watch?v=dIGFsBBcdTQ&feature=youtu.be

这是我的HTML文档的<head>：

<script> 

var $after = $('.after'),
        img_width = $('.after img').width(),
        init_split = Math.round(img_width/2);

  $after.width(init_split);  

        $('.before_after_slider').mousemove(function(e){
        var offX  = (e.offsetX || e.clientX - $after.offset().left);
            $after.width(offX);
        });

        $('.before_after_slider').mouseleave(function(e){
        $after.stop().animate({
        width: init_split
        },1000)
        });

</script>

这是身体：

 <div class="before_after_slider">
      <div class="before">
        <img src="center_before.jpg" width="100%" height="100%" alt="before" />
      </div>
      <div class="after">
        <img src="center_after.jpg" width="100%" height="100%"  alt="after" />
      </div>
    </div>

这就是CSS

.before_after_slider {
  position: relative;

  & > * {
    position: absolute;
  }
}

.after {
  overflow: hidden;
}

Answer 1

DOM准备就绪时调用函数。

尝试：

$(document).ready(function () {
    var $after = $('.after'),
        img_width = $('.after img').width(),
        init_split = Math.round(img_width / 2);

    $after.width(init_split);

    $('.before_after_slider').mousemove(function (e) {
        var offX = (e.offsetX || e.clientX - $after.offset().left);
        $after.width(offX);
    });

    $('.before_after_slider').mouseleave(function (e) {
        $after.stop().animate({
            width: init_split
        }, 1000)
    });
});

如何使滑块前/后工作？

1 个答案: