【发布时间】:2014-06-04 17:12:32
【问题描述】:
我正在尝试使用 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="#"> ☃ 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 是:
$(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 进行任何输入,例如爆炸或吹气,但如果我使用带有文本和边框的 div 元素,它就会显示出来。请帮忙!非常感谢。
【问题讨论】:
-
你为什么不用
http://localhost/?我们能知道您的directory structure以及this page的存储位置吗? -
你试过这样吗? 链接1
-
http://jquery.com链接到 jQuery 主页,而不是任何 js 文件。 -
我在使用 WAMP 时遇到了一些问题。它不允许我像以前那样访问文件,我不确定为什么。我曾经打开它并得到一个带有mysql和php之类的屏幕,现在它说我无权访问它,这对我来说根本没有任何意义。这就是为什么我将文件保存在本地,希望能够压缩整个文件,将其发送给某人,然后让他们打开 html 文件。
-
我删除了 jquery.com 行。我参加的其中一些在线课程真的让我对我不需要的信息或不起作用的信息感到困惑:/ 有这么多糟糕的信息,我自己很难学会这一点。谢谢你帮我抓住了。我很感激
标签: javascript jquery html css