简单的JavaScript图像缩略图查看器，可单击放大图像_Javascript_Jquery_Html_Css_Image

简单的JavaScript图像缩略图查看器，可单击放大图像

javascript jquery html css image

简单的JavaScript图像缩略图查看器，可单击放大图像,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我是JavaScript新手。我想有预览图像是一个点击链接到一个更大的图像在一个单独的窗口。就像亚马逊或易趣一样。下面是我到目前为止的代码，它非常适合鼠标悬停和预览，但我不知道如何获得放大图像的可点击链接。多谢各位 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <s

我是JavaScript新手。我想有预览图像是一个点击链接到一个更大的图像在一个单独的窗口。就像亚马逊或易趣一样。下面是我到目前为止的代码，它非常适合鼠标悬停和预览，但我不知道如何获得放大图像的可点击链接。多谢各位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Demo</title>
        <style>
            .preview {
            width:350px;
            height:150px}

            .thumb {
            width:125px;
            height:50px}{
            margin-right:3px;}

            .normal {
            border:3px solid #000000;}

            .selected {
            border:3px solid #ff0000;}
        </style>
    </head>
    <body>
        <img id="0" class="preview normal" src="" alt="preview" /><br>
        <p>
            <img id="1" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlhOGY1ZjBhY2UyNjMwMjE4MDJjMzZhODM2NGY2OWI=" alt="Red Belt Blk Buckle" onmouseover="preview(this)"/>
            <img id="2" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MzIxOWZhZmQyZTZkZTg1ZDQzYjI4MmIyYzU1MWU2Njg=" alt="Red Belt Nkl Buckle" onmouseover="preview(this)"/>
            <img id="3" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6MjlhOTQ1N2Y4OGM2Y2I4OWIzY2I4YjZiMjU2N2MxZmM=" alt="Red Waist" onmouseover="preview(this)"/>
        <p>
            <img id="4" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YjE5MWRmMThhOTE3YWFjMzlkNDcyYzcwMWIxNzRlMWE=" alt="Red Waist" onmouseover="preview(this)"/>
            <img id="5" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6ZTlkMzY0YWZkMDUzNjcxNzlkMTRhZTIyZjFmOTk1YTM=" alt="Red Blk Buckle" onmouseover="preview(this)"/>
            <img id="6" class="thumb normal" src="http://cache.nebula.phx3.secureserver.net/obj/NTk0QjAxODIwOTAyNkNBNkQwRDI6YzdkZjcyZWVkZWQ1Y2Y4NjY2ZDFhY2EzYjU2NDA3OWQ=" alt="Red Nkl Buckle" onmouseover="preview(this)"/>
        <script>
            var lastImg = 1; //Set initial thumbnail and preview
            document.getElementById(0).src = document.getElementById(lastImg).src;
            document.getElementById(lastImg).className = "thumb selected";

            function preview(img) {
                document.getElementById(lastImg).className = "thumb normal";
                img.className = "thumb selected";
                document.getElementById(0).src = img.src;
                lastImg = img.id
            }
        </script>
    </body>
</html>


演示
.预览{
宽度：350px；
高度：150px}
.拇指{
宽度：125px；
高度：50px}{
右边距：3px；}
.正常{
边框：3px实心#000000；}
.选定{
边框：3px实心35; ff0000；}




var lastImg=1//设置初始缩略图和预览
document.getElementById（0）.src=document.getElementById（lastImg）.src；
document.getElementById（lastImg）.className=“thumb selected”；
功能预览（img）{
document.getElementById（lastImg）.className=“拇指正常”；
img.className=“选择拇指”；
document.getElementById（0.src=img.src；
lastImg=img.id
}

您这样做是为了学习吗？有很多现成的图像库。我还建议您四处看看现有的JavaScript图像库。完成这项任务可能相当艰巨。此外，我建议无论HTML5是否允许，您总是关闭打开的标记（如

元素）。这可能会节省一些输入，但最终会破坏很多东西，让你陷入调试地狱，我认为这不值得。此外，在你的
元素中有一个
元素不应该在那里。@AndreiNikolaenko你能告诉我有什么好的图像库吗？我总是让自己感到抱歉。我不明白“点击链接到放大的图像”。这个链接非常接近OP的要求