jQuery和contain不工作
jQuery和contain不工作
提问于 2013-12-10 13:34:41
我用的是泛变焦，它应该可以用鼠标卷轴。缩放和其他东西可以工作，但我被困在这里：
我需要把这张照片留在它的盒子里，这样它就不会显示背景中的东西。
我已经搜索了好几天了，现在我转向你们了。
<!DOCTYPE html>
<html>
<head>
<title>Pannutsuumailu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body { background: #F5FCFF; color: #333666; }
section { text-align: center; margin: 50px 0; }
.panzoom-parent { border: 2px solid #333; }
.panzoom-parent .panzoom { border: 2px dashed #666; }
.buttons { margin: 40px 0 0; }
</style>
<script src="../test/jquery.js"></script>
<script src="../dist/jquery.panzoom.js"></script>
<script src="../bower_components/jquery-mousewheel/jquery.mousewheel.js"></script>
</head>
<section id="focal">
<div class="panzoom-parent" width="960" height="1000">
<div class="panzoom">
<img src="enocell.jpg" width="1920" height="1920"></img>
</div>
</div>
<script>
(function() {
var $section = $('#focal');
var $panzoom = $section.find('.panzoom').panzoom();
$panzoom.parent().on('mousewheel.focal', function( e ) {
contain: "invert",
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.3,
minScale: 1,
maxScale: 2,
});
});
})();
</script>
</section>谢谢你的帮忙!
我是用一个带有插件“Pan缩放”的示例https://github.com/timmywil/jquery.panzoom/tree/master/demo制作的(您可以在上面找到它^)
编辑:这应该可以做到，但由于某些原因，它对我不起作用。
包含：“反转”-“确保你的泛变焦元素比父元素大或相同大小。”，除非我是瞎子，否则它是。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-01 08:31:09
有点晚了，但对于其他人来说：
显然，这是一个已知的火狐错误。您需要在泛变焦https://github.com/jquery/jquery-mousewheel之前包含鼠标轮插件。
Stack Overflow用户
发布于 2015-07-25 14:56:09
我也有这个问题，并最终找到了解决办法，今天，学分到这的帖子。
HTML：
<div id="container" style='position:absolute;width:500px;height:180px;'>
<img id='the_image' src='./images/yourimage.png' />
</div>JavaScript：
<script type="text/javascript">
var $panzoom = $('#the_image').panzoom({
contain: 'invert'
});
$panzoom.parent().on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$panzoom.panzoom('zoom', zoomOut, {
increment: 0.1,
focal: e
});
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20495983
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号