每天学一个jquery插件-做图片对比

每天一个jquery插件-做图片对比

做图片对比

很常见的一个效果,做起来不难

效果如下

代码部分


<html>
	<head>
		<meta charset="utf-8">
		<title>做图片对比title>
		<script src="js/jquery-3.4.1.min.js">script>
		<style>
			*{
      
				margin: 0px;
				padding: 0px;
				user-select: none;
			}
			.div{
      
				border: 1px solid lightgray;
				width: 400px;
				height: 200px;
				margin: 10px;
				float: left;
				position: relative;
			}
			.img1{
      
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 50%;
			}
			.img2{
      
				position: absolute;
				top: 0;
				bottom: 0;
				left: 50%;
				right: 0;
			}
			.img1,.img2{
      
				background-position: center center;
				background-size: 400px 200px;
				background-repeat: no-repeat;
			}
			.img1{
      
				background-position-x: 0;
			}
			.img2{
      
				background-position-x: 100%;
				filter: invert(100%);
			}
			.bar{
      
				position: absolute;
				top: 0;
				bottom: 0;
				right:-4px;
				width: 8px;
				background-color: gray;
				cursor: ew-resize;
				opacity: 0.2;
			}
			.stop{
      
				pointer-events: none;
			}
		style>
	head>
	<body>
		<div class="div">
			<div class="img1" style="background-image: url(img/1.jpg);">
				<div class="bar" data-flag="0">div>
			div>
			<div class="img2" style="background-image: url(img/1.jpg);">div>
		div>
		<div class="div">
			<div class="img1" style="background-image: url(img/2.jpg);">
				<div class="bar" data-flag="0">div>
			div>
			<div class="img2" style="background-image: url(img/2.jpg);">div>
		div>
	body>
html>
<script>
	$(document).ready(function(){
      
		$(".bar").mousedown(function(){
      
			$(this).parent().addClass("stop");
			$(this).parent().next().addClass("stop");
			$(this).attr("data-flag","1")
		})
		$(".div").mousemove(function(e){
      
			var temp = $(this).find('.bar').attr("data-flag");
			if(temp=="1"){
      
				var w = $(this).width();
				var x = e.offsetX;
				var p = parseFloat((x/w).toFixed(2))*100;
				$(this).children(".img1").css('width',p+'%');
				$(this).children(".img2").css('left',p+'%');
			}
		})
		$(document).mouseup(function(){
      
			$(".img1,.img2").removeClass("stop");
			$(".bar").attr("data-flag","0")
		})
	})
script>

思路解释

  • 感觉很简单,就是俩图作为背景图片然后控制他的布局位置,控制容器的宽高就行了
  • 需要做适应性优化的还有背景图大小的控制,当然父容器不会变化就不会出问题

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)