jQuery分割线拖拽照片前后对比特效代码

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

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

以下是 jQuery分割线拖拽照片前后对比特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery分割线拖拽照片前后对比</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css"/>
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"/>
</head>
<body>

<div class="covered first">
  <div class="handle"></div>
  <div class="changeable"></div>
</div>
<div class="covered second">
  <div class="handle"></div>
  <div class="changeable"></div>
</div>
<div class="covered third">
  <div class="handle"></div>
  <div class="changeable"></div>
</div>
<div class="covered fourth">
  <div class="handle"></div>
  <div class="changeable"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/coveringBad.js"></script>
<script type="text/javascript">
		$('.first').coveringBad({
			marginY : 30 ,
			marginX : 30 ,
			setX  : 200,
			setY  : 100 ,
			direction   : "vertical"
		});

		$('.second').coveringBad({
			marginY : 20 ,
			marginX : 20 ,
			setX  : 210,
			setY  : 140 ,
			direction   : "horizontal"
		});

		$('.third').coveringBad();

		$('.fourth').coveringBad({
			marginY : 20 ,
			marginX : 400 ,
			setX  : 400,
			setY  : 235 ,
			direction   : "vertical"
		});
	</script>
</body>
</html>

JS代码(coveringBad.js):

/* * Project:Covering Bad * Description:A simple jQuery Plugin for cover an item by another item with dragging ability. * Author:Mojtaba Seyedi * License:MIT http://seyedi.mit-license.org*/
(function($){
	$.fn.coveringBad = function(options){
	var settings = $.extend({
	marginY:30,marginX:30,setX:30,setY:30,direction:"horizontal"}
,options);
	return this.each(function(){
	// Initialization////////////////////////////////var $this = $(this),$changeable = $this.find('>.changeable'),$handle = $this.find('>.handle'),width = $this.innerWidth(),height = $this.innerHeight(),pos_x = null,pos_y = null,startX = null,startY = null,min_left = settings.marginX,max_left = width - settings.marginX,min_top = settings.marginY,max_top = height - settings.marginY,setX = settings.setX,setY = settings.setY;
	$changeable.height($this.height());
	if(setX < min_left){
	setX = min_left;
}
if(setY < min_top){
	setY = min_top;
}
$handle.append('<span class="left icon-chevron-left"></span><span class="right icon-chevron-right"/></span>')$handle.css('left',setX);
	$handle.css('top',setY);
	// Direction//////////////////////////////////if(settings.direction === "horizontal" ){
	$changeable.width(setX);
	$changeable.css('border-right','1px dashed #FFF');
}
else if(settings.direction === "vertical" ){
	$this.height($changeable.height());
	$changeable.height(setY);
	$changeable.css('border-bottom','1px dashed #FFF');
	$handle.addClass('vertical');
}
// Dragging Bad//////////////////////////////////$handle.on('mousedown',function(event){
	event.preventDefault();
	$handle.addClass('draggable');
	pos_x = parseInt($handle.css('left'));
	startX = event.pageX;
	pos_y = parseInt($handle.css('top'));
	startY = event.pageY;
}
);
	$(document).on('mouseup',function(event){
	$handle.removeClass('draggable');
}
);
	$this.bind('mousemove',dragger);
	function dragger(e){
	var left = pos_x + (e.pageX - startX);
	if (left < min_left) left = min_left;
	else if (left > max_left) left = max_left;
	$('.draggable').css('left',left);
	var top = pos_y + (e.pageY - startY);
	if (top < min_top) top = min_top;
	else if (top > max_top) top = max_top;
	$('.draggable').css('top',top);
	if($('.draggable').length){
	changeWidth(left,top);
}
}
// Changing width or height//////////////////////////////////////function changeWidth(w,h){
	if(settings.direction === "horizontal" ){
	$changeable.width(w);
}
else if(settings.direction === "vertical" ){
	$changeable.height(h);
}
}
}
);
}
}
)(jQuery);

CSS代码(zzsc.css):

body{background-color:#E43;}
h1,h2{text-align:center;color:#fff;font-family:Arial;text-shadow:0 0 1px #000;}
h1{font-size:60px;text-shadow:0 0 5px rgba(0,0,0,.5);}
.covered{width:800px;height:470px;border:30px solid #FFF;margin:50px auto;background-image:url('../images/b2.jpg');box-shadow:0 0 40px 5px rgba(0,0,0,.4);}
.covered .changeable{background-image:url('../images/b1.jpg');}
.second{width:400px;height:300px;background-image:url('../images/m2.jpg');}
.second .changeable{background-image:url('../images/m1.jpg');}
.third{width:500px;height:400px;background-image:url('../images/1.jpg');}
.third .changeable{background-image:url('../images/2.jpg');}
.fourth{width:800px;height:470px;background-image:url('../images/l1.jpg');}
.fourth .changeable{background-image:url('../images/l2.jpg');}
.covered{position:relative;}
.handle{position:absolute;width:46px;height:46px;margin-left:-23px;margin-top:-23px;border-radius:50%;background-color:#fff;text-align:center;}
.handle span{display:inline-block;margin:15px 1px 0;color:#000;-webkit-transition:.1s ease-out;-moz-transition:.1s ease-out;-ms-transition:.1s ease-out;-o-transition:.1s ease-out;transition:.1s ease-out;}
.handle.vertical{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg);transform:rotate(90deg);}
.handle:hover{background-color:#555;}
.handle:hover span{color:#FFF;}
.draggable{background-color:#555;cursor:move;}
.draggable span{margin:15px 4px 0;color:#FFF;-webkit-transition:.1s ease-out;-moz-transition:.1s ease-out;-ms-transition:.1s ease-out;-o-transition:.1s ease-out;transition:.1s ease-out;}

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