jQuery的图像预览缩略图似乎不工作

Question

我只是想这样Easy image preview的提示...但我不能得到它的工作....

我用这个，

<style> 
body { 
    margin:0; 
    padding:40px; 
    background:#fff; 
    font:80% Arial, Helvetica, sans-serif; 
    color:#555; 
    line-height:180%; 
} 

h1{ 
    font-size:180%; 
    font-weight:normal; 
    color:#555; 
} 
h2{ 
    clear:both; 
    font-size:160%; 
    font-weight:normal; 
    color:#555; 
    margin:0; 
    padding:.5em 0; 
} 
a{ 
    text-decoration:none; 
    color:#f30; 
} 
p{ 
    clear:both; 
    margin:0; 
    padding:.5em 0; 
} 
pre{ 
    display:block; 
    font:100% "Courier New", Courier, monospace; 
    padding:10px; 
    border:1px solid #bae2f0; 
    background:#e3f4f9; 
    margin:.5em 0; 
    overflow:auto; 
    width:800px; 
} 

img{border:none;} 
ul,li{ 
    margin:0; 
    padding:0; 
} 
li{ 
    list-style:none; 
    float:left; 
    display:inline; 
    margin-right:10px; 
} 



/* */ 

#preview{ 
    position:absolute; 
    border:1px solid #ccc; 
    background:#333; 
    padding:5px; 
    display:none; 
    color:#fff; 
    } 

/* */ 
</style> 
<script type="text/javascript" src="jquery.js"></script> 

<ul> 
    <li> 
    <a href="Images/4.jpg" class="preview" title="Lake and a mountain"> 
      <img src="Images/4s.jpg" alt="gallery thumbnail" /> 
    </a> 
    </li> 
</ul> 

并包含样式...当我将鼠标悬停在锚标记上时，没有任何反应。...

Answer 1

您已包含jquery.js，但不包含main.js，它是您给出示例的第二个脚本。

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

Answer 2

他们正在使用jQuery插件来做到这一点。请参阅main.js文件，您可以在其中看到图像预览脚本。