【发布时间】：2013-05-04 11:23:24
【问题描述】：
如果您可以调整图像大小并拖动图像，我正在制作横幅。我在 jsfiddle 工作得很好。但由于某种原因，它在我的网页上不起作用。
这是 jsfiddle 中的示例：
http://jsfiddle.net/DennisBetman/tnaGA/
这是它在我的网页上的外观：
http://jewelbeast.com/posts/imgreplace.html
所以如果你能看到。滑块不起作用。并且可以拖动的图像很奇怪。
我在头部调用了脚本 jquery 和 jquery ui。
他是我用于网页的代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
div {
width:370px;
height:204px;
position:relative;
overflow:hidden;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
}
#box{
background:black;
cursor: move;
border: 1px solid black;
}
#hidden-img{
display:none;
}
</style>
</head>
<body>
<div id="box">
<img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="hidden-img" />
<img src="http://www.hdwallpapersarena.com/wp-content/uploads/2013/04/high-resolution-fantasy-woman.jpg" id="img" width="371" height="auto" style="top:-0px; left:-0px;" />
</div>
<!-- style="top:-262px; left:-425px;" -->
<div id="zoom"></div>
<input type="hidden" id="amount-width" style="border: 0; color: #f6931f; font-weight: bold;" />
<input type="hidden" id="amount-height" style="border: 0; color: #f6931f; font-weight: bold;" />
<div class="text"></div>
<p>
Position x:
<input type="text" id="val-x" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
Position y:
<input type="text" id="val-y" style="border:0; color:#f6931f; font-weight:bold;" />
</p>
<p>
<input type="file" onchange="readURL(this);" />
</p>
<script>
var previousValue = 0;
var hiddenImageWidth = $("#hidden-img").width() - 370;
jQuery("#zoom").slider({
max: hiddenImageWidth,
slide: function(event, ui){
var sliderValue = jQuery("#zoom").slider("value");
jQuery("#img").width(370 + sliderValue);
var pos = $("#img").position(); // returns an object with the attribute top and left
var top = pos.top; // top offset position
var left = pos.left; // left offset position
$("#val-x").val(left);
$("#val-y").val(top);
if (left > 0){
$("#img").css("left",'0px');
}
if (top > 0){
$("#img").css("top",'0px');
}
$("#amount-width").val(jQuery("#img").css("width"));
$("#amount-height").val(jQuery("#img").css("height"));
var width = $("#img").width();
var widthZoom = width + sliderValue;
var widthVerschil = widthZoom - sliderValue;
var totalWidth = widthVerschil - '370';
var height = $("#img").height();
var totalHeight = height - '207';
if (sliderValue < previousValue){
var t, l;
t = $('#img').position().top;
l = $('#img').position().left;
if(t < 0)
t = t + (previousValue - sliderValue);
if(l < 0)
l = l + (previousValue - sliderValue);
$('#img').offset({top: t, left: l});
}
previousValue = sliderValue;
$("#img").draggable({
containment: [-totalWidth, -totalHeight, 0, 0],
scroll: false,
iframeFix: true,
});
$('.text').html('<br/>The file size = ' + height + ' x ' + widthVerschil);
}
});
var height = $("#img").height();
var totalHeight = height - '207';
$("#img").draggable
({
containment: [0, -totalHeight, 0, 0],
snap: false,
drag: function(event, ui)
{
$("#val-x").val(ui.position.left);
$("#val-y").val(ui.position.top);
}
});
$("#img").offset({left: $(this).attr('position')});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img')
.attr('src', e.target.result)
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
</body>
</html>
你可以看到我的脚本在我的身体末端。我试着把它放在我的脑海里，但没有任何效果，你不会看到滑块。等等。
我也尝试放置这个脚本
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
在我的脚本功能下。但这也行不通。
我希望有人看到这个问题。
谢谢。
【问题讨论】：
标签： jquery jquery-ui slider draggable