使用鼠标拖动更改背景图像位置，如Facebook封面照片

这就是我目前所处的位置：https://codepen.io/chavdar84/pen/pKvXbq

我试图将拖动限制在图像的边框上。

var start_y;
var mouseDown = false;
var move = true;
$('.image').mousedown( function() {
mouseDown = true;
});
$(document).mouseup( function() {
mouseDown = false;
});
$('.image').mouseenter( function(e) {
start_y = e.clientY;
});
$(document).mousemove( function(e) {
// var window_width = $('.image').outerWidth();
// var element_height = $('.image').outerHeight();
var newPos = e.clientY - start_y;
if (mouseDown) {
if (parseInt($('.image').css('background-position-y')) >= -230) {
$('.image').css('background-position-y', '+=' + newPos);
}
console.log(start_y);
}
start_y = e.clientY;        
});

这是我能弄清楚的：

var imgWidth;
	var imgHeight;
	var img = new Image();
	img.src = 'https://picsum.photos/860/550/?image=316';
	
	$(img).on('load', function() {
		imgWidth = img.width;
		imgHeight = img.height;
		$('#image').css('background-image', 'url(' + img.src + ')');
	});
	
	//var newWidth = (400 * 100) / w;
	//console.log(newWidth);
	var start_y;
	var newPos;
	var curPos = $('#image').css('background-position-y');
	var mouseDown = false;
	var move = true;
	$('#image').mousedown( function(e) {
		mouseDown = true;
		//console.log(e.clientY);
	});
	
	$(document).mouseup( function() {
		mouseDown = false;
		$('.image').css('background-position-y', curPos)
	});
	
	$('#image').mouseenter( function(e) {
		start_y = e.clientY;
	});
		
	$(document).mousemove( function(e) {
		newPos = e.clientY - start_y;
		start_y = e.clientY;
		if (mouseDown) {
			$('#image').css('background-position-y', '+=' + newPos);
			curPos = parseInt($('#image').css('background-position-y'));
			if (curPos > 0) curPos = 0;
			if (curPos < -50) curPos = -50;
			$('#image').css('background-position-y', curPos);
		}
	});

#image {
width: 400px;
height: 200px;
border: 1px solid black;
background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<div id="image"></div>
</body>

在将背景设置为覆盖后获取图像的尺寸是一个完全不同的问题。再次感谢！

您可以通过计算图像的高度来做到这一点。下次请更准确地说明实际问题。

以下是处理此代码笔的一种方法

(function() {   
var imageHeight = 0;
var initialMouseY = 0;
var scrollY = 0;
var isAllowDrag = false;
var scrollDelta = 0;
function dragImage(e) {
scrollY = initialMouseY - e.clientY;
scrollDelta = imageHeight - e.target.scrollHeight;
if (isAllowDrag && scrollY < scrollDelta) {
e.target.style.backgroundPositionY = "-" + scrollY + "px";
}
}
function afterDrag(e) {
e.target.style.cursor = "-webkit-grab";
isAllowDrag = false;
}
function beforeDrag(e) {
e.target.style.cursor = "-webkit-grabbing";
initialMouseY = e.clientY;
isAllowDrag = true;
}
function addImage() {
var image = new Image();
image.src = "https://picsum.photos/800/400/?image=316"
imageHeight = image.height;
$(".image").css('backgroundImage', "url('https://picsum.photos/800/400/? 
image=316')");
}
$(".image").on("mouseup", afterDrag);
$(".image").on("mousemove", dragImage);
$(".image").on("mousedown", beforeDrag);
$(window).on("load", addImage);
}());

相关内容

最新更新

热门标签：