Question

我正在尝试使用javascript显示指向本地文件的链接，但它无法正常工作。我不确定我做错了什么。

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="#"> &#x2603 text</a></li>
        <li><a href="#">text</a></li>
        <li><a href="#">text</a></li>
        <li style="font-family:fantasy"><a href="#">&#x2600 text &#x2600 </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 &#x231B </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是：

$(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。显示任何输入，如爆炸或粉扑，但如果我使用带有文本和边框的div元素，它会显示出来。请帮忙！非常感谢。

Answer 1

如果您在本地运行脚本（通过浏览器的文件 - >打开菜单选项），那么您不需要驱动器号，除非它在不同的位置驾驶。如果要使用所需的任何路径，请在前面使用 file：// 。换句话说，您可以在任何可以使用 http：// 的地方使用 file：// 。

请记住，所有路径都相对于脚本位置。

Answer 2

当你这样做时，链接不会将文件下载到你的客户端，我想这就是你想要的。

如果要通过互联网提供此页面，则不应使用相对于计算机的URL，而应使用相对于服务器计算机的URL：

我会搜索网络服务器的文件夹...服务：p。在您的情况下，似乎是：c:\wamp\www
尝试将链接href更改为/Projects/tile/name.docx。这是相对于服务器的网址，这意味着当您的用户在您的网页中时，例如：http://localhost，并点击该链接，用户会尝试转到：http://localhost/Projects/tile/name.docx。
服务器将搜索其文件系统c:\wamp\www\Projects\tile\name.docx。

请注意文件系统网址c:\wamp\www\..和http://localhost/...格式的网址有何不同。

在这种情况下，您希望在您的页面中显示http://...形式的网址，因为如果您在查看您的网页的人点击该链接时使用文件系统网址，则浏览器会在人员计算机中搜索该文件，而不是在服务器计算机中。

此外，您可能希望在每个地方删除c:/wamp/www/，然后离开/。

我希望我没有错过这一点。

Answer 3

您网页上的修正很少：

<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:///：

所以：

<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>

对所有file:/// C:/和C://＆＃39;使用<script>和src代替<a> s，<link>＆＃39; s href将解决您的问题。

但是当您使用wamp时，启用它并使用http://localhost，同时使用relative paths到页面将会更容易。通常，最佳做法是使用相对URL，这样您的网站就不会绑定到当前部署的基本URL。例如，它可以在localhost上以及在您的公共域上工作，而无需修改。

有关详情，请参阅：Absolute vs relative URLs和http://www.webdeveloper.com/forum/showthread.php?208825-lt-script-gt-with-source-as-a-local-file

希望它能解决问题。

html / javascript链接到本地文件

3 个答案:

html / javascript链接到本地​​文件

3 个答案:

html / javascript链接到本地文件