Question

我尝试使用queries中的代码段在我的网站上获取前后图像滑块。

但它只显示黑白图像。

我把这些部分组合在一起：

＆＃13;

{{1}}

＆＃13;

Answer 1

试试这个：删除未使用的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>

之前的滑块不起作用

1 个答案: