无法让JS文件在jsfiddle中工作

时间:2014-12-09 17:03:07

标签: javascript html jsfiddle

我在Brackets工作了,但似乎无法在jsfiddle中使用它。我认为这与调用外部JS文件有关。我已经尝试以HTML格式添加它:

<script type='text/javascript' src="jquery.contenthover.js"></script>

以及&#39;外部资源&#39;部分,但没有这样的运气。 这是当前无效的jsfiddle:http://jsfiddle.net/uvb1u8y1/1/

这是Brackets的工作代码:

.contenthover {
padding: 20px 20px 10px 20px;
}
.contenthover, .contenthover h3, contenthover a {
color: #fff;
}
.contenthover h3, .contenthover p {
margin: 0 0 10px 0;
line-height: 1.4em;
padding: 0;
}
.contenthover a.mybutton {
display: block;
float: left;
padding: 5px 10px;
background: #0b94e5;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.contenthover a.mybutton:hover {
background: #005588;
}
.demo {
margin: 20px auto;
}
.mybackground {
background: url(transparent_bg.png);
}
h1 { margin-top:150px;}

<div class="demo">
<h2>Slide effect with different speed</h2>
<img id="d2" src="1.jpg" width="300" height="240" />
<div class="contenthover">
<h3>Lorem ipsum dolor</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum pulvinar ante quis augue lobortis volutpat. </p>
<p><a href="#" class="mybutton">Lorem ipsum</a></p>
</div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="jquery.contenthover.js"></script> 
<script>

$('#d2').contenthover({
effect:'slide',
slide_speed:300,
overlay_background:'#000',
overlay_opacity:0.8
});

</script>

1 个答案:

答案 0 :(得分:2)

jquery.contenthover.js应该来自哪里?

JSFiddle没有在他们生成您编写的HTML文档的同一目录中为您托管它的副本。

您需要将绝对URL用于托管它的某个位置。