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