我的图像库的JavaScript代码_Javascript_Jquery_Html_Css

我的图像库的JavaScript代码

javascript jquery html css

我的图像库的JavaScript代码,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在使用html和css制作一个简单的图库页面。我把它编码到一个html浏览器中，它工作得很好，但是当我在谷歌浏览器中打开它时，IE的onmouseover不工作了。当您浏览选定的缩略图时，它应该在底部框中显示较大的图像，但它不起作用我以前贴过这个问题，得到了很好的回复。我想问一下，是否有人可以给我一个简单的javascript代码，我需要把它放在工作。我有这段代码，有人好心地给出了它的工作，但如果可能的话，我希望只使用java脚本代码 $(function(){ $('.thumb

我正在使用html和css制作一个简单的图库页面。我把它编码到一个html浏览器中，它工作得很好，但是当我在谷歌浏览器中打开它时，IE的onmouseover不工作了。当您浏览选定的缩略图时，它应该在底部框中显示较大的图像，但它不起作用

我以前贴过这个问题，得到了很好的回复。我想问一下，是否有人可以给我一个简单的javascript代码，我需要把它放在工作。我有这段代码，有人好心地给出了它的工作，但如果可能的话，我希望只使用java脚本代码

$(function(){
    $('.thumbnails img').hover(function(){
        $('#preview').attr('src',$(this).attr('src'));
    },null);
});

谢谢大家!

<!DOCTYPE html>

<head>
<title>Gallery</title>

<style type="text/css">
body {
background: #222;
margin-top: 100px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 100px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}

</style>

</head>
<body>


<div class="gallery" align="center">


<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>  
    <img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg"  alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg"  alt="Image Not Loaded"/>

</div></br>

<div class="preview" align="center">
    <img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>

</br>



</div>
</body>
</html>


画廊
身体{
背景：#222；
边缘顶部：100px；
}
h3{
颜色：#eee；
字体系列：Verdana；
}
.缩略图{
高度：100px；
边框：4px实心#555；
填充：1px；
利润率：0 10px 10px 0；
}
.缩略图img：悬停{
边框：4px实心#00ccff；
光标：指针；
}
.预览img{
边框：4px实心#444；
填充：1px；
宽度：800px；
}

这是您的多媒体资料的vanilla JS版本：

var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onmouseover = function () {
        document.getElementById('preview').src = this.src;
    }
}

下面是一个活生生的例子：

在Chrome/Linux上，我看不出它有什么问题：。。。啊，刚刚看到你想要纯JS版本，对吗？是的，请，只是一个纯javascript:）当然，给我一分钟。天哪，非常感谢！！它工作得很好！！谢谢谢谢谢谢!！没问题！：）您可能希望将其与image.onload结合使用，以防您使用的是一些慢图像和大图像，但是的，这应该可以让您开始使用。@user3449976如果答案确实满足您的需要，请将其标记为正确答案，以便其他人可以从中受益。谢谢，我们会这样做的！再次非常感谢你。还有一个问题，如果你不想回答，你不必回答，但是如果我想在每个放大的图像下添加一个描述，我会怎么做呢？因此，如果我想在放大的图像下面有不同的描述，那么不客气！：）最自然的方法似乎是使用alt属性，但您可以将描述存储在其他地方。我将向您展示如何将其与alt一起使用，然后您可以将其复制到任何您想要的地方。给我一分钟。

document.getElementById('desc').innerHTML = this.alt; // this goes inside our loop