我试图制作这个东西,我有一个带有完整背景图像的div和带有容器的顶部div,并且这个div是可拖动的,并且当拖动时它显示与背景相同的图像但是改变。
嗯,这个pen
的行中有些东西我的CSS到目前为止:
.contain{
position:relative;
}
#dummy{
background:url(http://i.imgur.com/CxYGDBq.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-size:cover;
position:absolute;
top:0;
left:0;
}
#dummy2{
position:absolute;
top:0;
z-index:99;
left:0;
}
.mao{
background: url(http://i.imgur.com/UbNyhzS.png);
width:250px;
height:300px;
position:absolute;
bottom:0;
z-index:999;
background-size:contain;
}
.screen{
width:960px;
height:995px;
background-color:pink;
position:relative;
left:32px;
top:30px;
background-attachment:fixed;
background: url(http://i.imgur.com/yjR8SCL.jpg);
}
答案 0 :(得分:2)
如果我正确理解您的要求,您可以通过查找可拖动对象移动时的当前位置,然后使用这些值设置background-position
&#39的screen
来执行此操作; s背景,给出一种X射线眼镜效果。
var imageOffset = {
top: 30,
left: 32
};
$(function() {
var screenHeight = $('body').height() - 300; // 300: moa height
$(".screen").css('background-position', -(imageOffset.left) + 'px ' + -(screenHeight + imageOffset.top) + 'px');
$(".mao").draggable({
axis: "x",
drag: function(event, ui) {
$(".screen").css('background-position', -(ui.position.left + imageOffset.left) + 'px ' + -(ui.position.top + imageOffset.top) + 'px');
}
});
})
示例代码:http://codepen.io/anon/pen/JWxwzK?editors=0000
您还可以使用相同的代码将手限制在屏幕的左/右边界。在官方文档中有一个代码示例:http://api.jqueryui.com/draggable/#event-drag
答案 1 :(得分:0)
对于我想你想做的事情,我已经编辑了你的笔以反映正确的变化。你可以看到它here。
嵌套错误
首先改变的是将想要拖动的div <div class="mao"></div>
切换为<div class="screen"></div>
元素的子元素。
CSS图片网址 另外需要注意的一点是 - 在CSS中指定URL时,需要将其包装在引号内。这些&#34; $ url_here &#34; 。