我尝试使用来自 http://codepen.io/ace/pen/BqEer/ 的代码片段在我的网站上获得前后图像 slider 。 .
但它只显示黑白图像。
我把这些部分放在一起是这样的:
<!DOCTYPE html>
<html>
<head>
<title>Awesome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" />
<style>
.before_after_slider {
position: relative;
margin: 60px;
width: 640px;
height: 400px;
}
.before_after_slider > * {
position: absolute;
}
.black_white {
overflow: hidden;
}
</style>
<script>
var $black_white = $('.black_white'),
img_width = $('.black_white img').width(),
init_split = Math.round(img_width / 2);
$black_white.width(init_split);
$('.before_after_slider').mousemove(function(e) {
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$('.before_after_slider').mouseleave(function(e) {
$black_white.stop().animate({
width: init_split
}, 1000)
});
</script>
</head>
<body>
<div class="before_after_slider">
<div class="color">
<img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt="" />
</div>
<div class="black_white">
<img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400" alt="black_white" />
</div>
</div>
</body>
</html>最佳答案
试试这个:删除未使用的 css，添加 jquery 并将脚本移到最后。
<!DOCTYPE html>
<html>
<head>
<title>Awesome</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.before_after_slider {
position: relative;
margin: 60px;
width: 640px;
height: 400px;
}
.before_after_slider > * {
position: absolute;
}
.black_white {
overflow: hidden;
}
</style>
</head>
<body>
<div class="before_after_slider">
<div class="color">
<img src="http://i.picresize.com/images/2013/04/06/9pX4.png" width="640" height="400" alt="" />
</div>
<div class="black_white">
<img src="http://i.picresize.com/images/2013/04/06/2sJzq.png" width="640" height="400" alt="black_white" />
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script>
var $black_white = $('.black_white'),
img_width = $('.black_white img').width(),
init_split = Math.round(img_width / 2);
$black_white.width(init_split);
$('.before_after_slider').mousemove(function(e) {
var offX = (e.offsetX || e.clientX - $black_white.offset().left);
$black_white.width(offX);
});
$('.before_after_slider').mouseleave(function(e) {
$black_white.stop().animate({
width: init_split
}, 1000)
});
</script>
</body>
</html>关于javascript - 前后 slider 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36030522/