Fatal编程技术网

Javascript JSFiddle到HTML

javascript jquery html css

Javascript JSFiddle到HTML,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我是javascript和jquery的新手。我有一个用于滑动条的代码，它在JSFIDLE上运行良好；但是，当我尝试以HTML文件的形式运行时，它不起作用。我不知道我在这里遗漏了什么，也不知道需要做什么才能使这段代码正常工作。请让我知道哪些库文件，我将必须包括在代码中的酒吧幻灯片在HTML 我在JSFIDLE上的代码链接是： 任何帮助都将不胜感激 提前谢谢 `.box { width:40px; height:10px; background:blue; } .box1 { width:25px

我是javascript和jquery的新手。我有一个用于滑动条的代码，它在JSFIDLE上运行良好；但是，当我尝试以HTML文件的形式运行时，它不起作用。我不知道我在这里遗漏了什么，也不知道需要做什么才能使这段代码正常工作。请让我知道哪些库文件，我将必须包括在代码中的酒吧幻灯片在HTML

我在JSFIDLE上的代码链接是：

任何帮助都将不胜感激

提前谢谢

`.box {
width:40px;
height:10px;
background:blue;
}
.box1 {
width:25px;
height:10px;
position:relative;
top:40px;
left:40px;
background:black;
}
.result{
position:fixed;
top:20px;  
}
.result1{
position:fixed;
top:70px;
}

<script>    
$(".box").draggable({
axis: "x",
drag: function(event, ui) {
    var y2 = ui.position.top;
    var x2 = ui.position.left;


    if (reverting){
        event.preventDefault();
        event.stopImmediatePropagation();
    } else if (x2 > 100) {
        reverting = true;
        revertDrag($('.box'));
    }
    else if (x2<0) {

    }
    }
 });

 function revertDrag(element){
 element.draggable('disable');
 element.animate({
    top: 0,
  }, {
    duration: 500,

    complete: function() {
        reverting = true;
        element.draggable('enable');


    }
})

}
$(".box1").draggable({
axis: "x",
drag: function(event, ui) {
    var y3 = ui.position.top;
    var x3 = ui.position.left;




    if (reverting1){
        event.preventDefault();
        event.stopImmediatePropagation();
    } else if (x3 > 200) {
        reverting1 = true;
        revertDrag1($('.box1'));
        alert("this is incorrect");
    }
    else if (x3<40) {
    alert("Wrong submission");
        revertDrag2($('.box1'));
       }
 }
 });

function revertDrag1(element){
element.draggable('disable');
element.animate({
    top:40,
}, {
    duration: 500,

    complete: function() {
        reverting1 = false;
        element.draggable('enable');


    }
})

}
    function revertDrag2(element){
element.draggable('disable');
element.animate({
    top:40,
    left:70,
}, {
    duration: 500,

    complete: function() {
        reverting1 = true;
        element.draggable('enable');


    }
})

}
</script>

<body>
<div class="box">
</div>
<div class="result">
</div>
<div class="box1">

<div class="result1">
</div>
</div>
</body>
您需要在代码中添加jquery引用

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
如果您查看fiddle中的框架和扩展，您将看到您的基本库是jquery1.10.1，然后您将包含jqueryui1.10.3，这是一个JS和一个CSS文件

CSS可以在任何时候包含，但最好是在JS之前。JS顺序很重要，jQuery包含在jQueryUI之前

因此，在HTML中类似这样的内容：

<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
您可以在以下url找到演示页面，按CTRL+U可查看源代码：

在示例中，这是在标题上设置的内容：

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title> - jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
    <style type='text/css'>
        .box {
        width:20px;
        height:10px;
        background:blue;
        }
        .box1 {
        width:20px;
        height:10px;
        position:relative;
        top:40px;
        background:black;
        }
        .result {
        position:fixed;
        top:20px;
        }
        .result1 {
        position:fixed;
        top:70px;
        }
    </style>
    <script type='text/javascript'>//<![CDATA[ 
        $(window).load(function(){
        });//]]>
    </script>
</head>
您是在为HTML页面使用样式表还是在页面样式中使用样式表？错误地阅读此问题：/my badwrap样式标记中的样式您在上面粘贴的代码是您放在HTML文件中的代码吗？如果是这样的话，会有很多错误。。。缺少，以及jquery的调用。若要调试此类错误，请转到浏览器的检查器，并检查Console选项卡，它将为您提供一些不顺利的帮助。这只是一个粗略的草稿。我没有在这里添加头和样式标签。但是在主html文件中添加了它们。我知道这一点，但是如果我在代码中使用它，它就不起作用了。我必须下载整个库，然后它才能工作。moreova我一直不明白对结果光文件的引用。那有什么意义呢？谢谢，鲍尔德：我知道问题出在哪里了。