html/javascript链接到本地文件 [英] html/javascript link to a local file
问题描述
我正在尝试使用javascript显示到本地文件的链接，但它不起作用.我不确定自己在做什么错.
I'm trying to show a link to a local file using javascript, and it isn't working. I'm not sure what I'm doing wrong.
html是:
<!DOCTYPE><HTML>
<head>
<title>Name</title>
<meta charset="UTF-8"/>
<link href="C://wamp/www/Projects/File/stylesheet.css" type="text/css" rel="stylesheet">
<link href="C://wamp/www/jquery-ui-1.10.3.custom/css/Mary/jquery-ui-1.10.3.custom.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src='http://jquery.com'></script>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="C://wamp/www/Projects/File/jscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Cinzel' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="content">
<div id="list">
<ul>
<li><a href="#">text</a></li>
<li><a href="#">text <small>text</small> text</a></li>
<li><a href="#">text</a></li>
<li style="font-family:Andale Mono"><a href="#"> ☃ text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li style="font-family:fantasy"><a href="#">☀ text ☀ </a></li>
<li><a href="#">text</a></li>
<li style="font-family: Bitstream Vera Sans Mono"><a href="#">(text)</a></li>
<li><a href="#">text</a></li>
<li><a href="#"><mark>text</mark></a></li>
<li><a href="#">text ⌛ </a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#">text</a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
</div>
</div>
<a href="C://wamp/www/Projects/tile/name.docx"id="background">
</body>
</html>
css是:
#content {
background-color: #030505;
height:100%;
width:100%;
}
#list{
height:100%;
width:100%;
position:relative;
margin:0 auto;
overflow:hidden;
}
#list ul, #list li{
list-style:none;
margin:0;
padding:0;
}
#list a{
position:absolute;
text-decoration: none;
color: #444444;
}
#list a:hover{
color: #EB7500;
}
#background {
width: 100%;
height: 100%;
position: fixed;
}
而javascript是:
and the javascript is:
$(document).ready(function () {
var element = $('#list a');
var offset = 0;
var stepping = 0.03;
var list = $('#list');
var $list = $(list);
$list.mousemove(function (e) {
var topOfList = $list.eq(0).offset().top;
var listHeight = $list.height();
stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--) {
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 30);
function render() {
for (var i = element.length - 1; i >= 0; i--) {
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 10;
y = 45 + Math.cos(angle) * 40;
size = Math.round(40 - Math.sin(angle) * 20);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
$(element[i]).css("fontSize", size + "pt");
$(element[i]).css("opacity", size / 100);
$(element[i]).css("zIndex", size);
$(element[i]).css("left", leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
$(function(){
$('#content').click(function(){
$(this).hide();
$('#background').show;
});
});
当我单击内容时，它仅显示一个空白屏幕.我试图以我所知道的所有方式来建立链接，并且我确定自己缺少一些愚蠢的东西，但是这让我发疯了！我什至无法让我的jquery .show进行任何输入，例如explode或puff，但是如果我将div元素与文本和边框一起使用，它将显示出来.请帮忙！非常感谢.
when I click on the content, it just shows a blank screen. I've tried to make the link every way I know how, and I'm sure I'm missing something silly, but it's driving me crazy! I can't even get my jquery .show to do any of it's inputs like explode or puff, but if I use div elements with text and borders, it shows up. Please help! Thanks so much.
推荐答案
页面中几乎没有更正:
<script type="text/javascript" src='http://jquery.com'></script> <!-- This is Absolutely Wrong -->
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
要加载本地脚本，请使用:file:///:
And To Load Local scripts use: file:/// for it:
所以:
<script type="text/javascript" src="C://wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script> <!-- Also It is C:/ not C:// -->
将是:
<script type="text/javascript" src="file:///C:/wamp/www/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
通过对所有<script>的src和<a>使用file:///和C:/而不是C://，<link>的href将解决您的问题.
By Using file:/// and C:/ instead of C:// for all <script>'s src and <a>'s, <link>'s href will solve your problem.
但是，当您使用wamp时，将其打开并使用http://localhost，同时在页面上使用relative paths也将更加容易.通常，使用相对URL被认为是最佳实践，这样您的网站就不会绑定到当前部署位置的基本URL.例如，它无需修改即可在localhost和您的公共域上工作.
But As you are using wamp, Switch it on and use http://localhost, also using relative paths to the page will be much more easy. In general, it is considered best-practice to use relative URLs, so that your website will not be bound to the base URL of where it is currently deployed. For example, it will be able to work on localhost, as well as on your public domain, without modifications.
有关更多信息，请参见:绝对URL和相对URL 和
For more see: Absolute vs relative URLs and http://www.webdeveloper.com/forum/showthread.php?208825-lt-script-gt-with-source-as-a-local-file
希望它将解决问题.
这篇关于html/javascript链接到本地文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
