Question

这是我到目前为止的地方：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;        
});

Answer 1

这是我能想到的：

＆＃13;

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);
		}
	});

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 2

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

以下是接近此codepen

的一种方法

(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);
}());

使用像facebook封面照片一样的鼠标拖动更改背景图像位置

2 个答案: