jQuery电影背景画面对比滑块代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery电影背景画面对比滑块代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery电影背景画面对比滑块代码</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
	.ba-slider {
	  position: relative;
	  overflow: hidden;
	}
	.ba-slider img {
	  width: 100%;
	  display: block;
	}
	.resize {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 100%;
	  width: 50%;
	  overflow: hidden;
	}
	.handle {
	  /* Thin line seperator */
	  position: absolute;
	  left: 50%;
	  top: 0;
	  bottom: 0;
	  width: 4px;
	  margin-left: -2px;
	  background: rgba(0, 0, 0, 0.5);
	  cursor: ew-resize;
	}
	.handle:after {
	  /* Big orange knob  */
	  position: absolute;
	  top: 50%;
	  width: 64px;
	  height: 64px;
	  margin: -32px 0 0 -32px;
	  content: '\21d4';
	  color: white;
	  font-weight: bold;
	  font-size: 36px;
	  text-align: center;
	  line-height: 64px;
	  background: #ffb800;
	  /* @orange */
	  border: 1px solid #e6a600;
	  /* darken(@orange, 5%) */
	  border-radius: 50%;
	  transition: all 0.3s ease;
	  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.5), inset 0 60px 50px -30px #ffd466;
	  /* lighten(@orange, 20%)*/
	}
	.draggable:after {
	  width: 48px;
	  height: 48px;
	  margin: -24px 0 0 -24px;
	  line-height: 48px;
	  font-size: 30px;
	}
</style>
</head>
<body>
<div class="ba-slider">
	<img src="img/nS6dvpq.jpg" alt="">       
	<div class="resize">
		<img src="img/BIHN8KQ.jpg" alt="">
	</div>
	<span class="handle"></span>
</div>
<script src='js/jquery-1.8.3.min.js'></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/before-after.min.js"></script>
</body>
</html>

JS代码(before-after.min.js):

function drags(e,a,s){
	e.on("mousedown vmousedown",function(t){
	e.addClass("draggable"),a.addClass("resizable");
	var i=e.outerWidth(),l=e.offset().left+i-t.pageX,n=s.offset().left,o=s.outerWidth();
	minLeft=n+10,maxLeft=n+o-i-10,e.parents().on("mousemove",function(e){
	leftValue=e.pageX+l-i,leftValue<minLeft?leftValue=minLeft:leftValue>maxLeft&&(leftValue=maxLeft),widthValue=100*(leftValue+i/2-n)/o+"%",$(".draggable").css("left",widthValue).on("mouseup vmouseup",function(){
	$(this).removeClass("draggable"),a.removeClass("resizable")}
),$(".resizable").css("width",widthValue)}
).on("mouseup vmouseup",function(){
	e.removeClass("draggable"),a.removeClass("resizable")}
),t.preventDefault()}
).on("mouseup vmouseup",function(){
	e.removeClass("draggable"),a.removeClass("resizable")}
)}
$(document).ready(function(){
	$(".ba-slider").each(function(){
	var e=$(this),a=e.width()+"px";
	e.find(".resize img").css("width",a),drags(e.find(".handle"),e.find(".resize"),e)}
)}
),$(window).resize(function(){
	$(".ba-slider").each(function(){
	var e=$(this),a=e.width()+"px";
	e.find(".resize img").css("width",a)}
)}
);

CSS代码(before-after.min.css):

.ba-slider{position:relative;overflow:hidden}
.ba-slider img{width:100%;display:block}
.ba-slider .resize{position:absolute;top:0;left:0;height:100%;width:50%;overflow:hidden}
.ba-slider .handle{position:absolute;left:50%;top:0;bottom:0;width:4px;margin-left:-2px;background:rgba(0,0,0,.5);cursor:ew-resize}
.ba-slider .handle:after{position:absolute;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;content:'\21d4';color:#fff;font-weight:700;font-size:36px;text-align:center;line-height:64px;background:#ffb800;border:1px solid #e6a600;border-radius:50%;transition:all .3s ease;box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.5),inset 0 60px 50px -30px #ffd466}
.ba-slider .handle.draggable:after{width:48px;height:48px;margin:-24px 0 0 -24px;line-height:50px;font-size:30px}

附件:下载该文件资源,减少时间成本(增值服务)