0
我正在做一个横幅，你可以调整大小和拖动图像。我在jsfiddle中工作得很好。但由于某种原因，它不工作在我的网页上。jquery滑块和可拖动不工作
这里是的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>
下我的脚本功能。但那也行不通。
我希望有人看到这个问题。
谢谢。
谢谢您的回答。我试过这个，但由于某种原因它仍然在窃听。 – 2013-05-04 11:58:59
当我在控制台中看，我尝试使用他说的滑块。 Uncaught TypeError：无法调用未定义的方法'addClass' – 2013-05-04 12:00:05
我检查了您的网站代码，我没有看到您的代码包装在ready函数中。首先再试一次。这是一个经典的问题，只有你的网站代码和你的jsfiddle之间的区别是比在jsfiddle，jquery代码包装在onload回调函数和jsfiddle使用jQuery UI 1.9.2而不是jQuery UI 1.10.3 {即使这不应该影响你的代码}。 – 2013-05-04 12:13:10