美文网首页
02-12作业1缩略图

02-12作业1缩略图

作者: 生命的怒放 | 来源:发表于2019-02-12 17:47 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
                <img id = 'img11' src="img/picture-1.jpg" alt="" />
            <div id = 'div2'>
                <img id = 'img1' src="img/thumb-1.jpg" alt="" />
                <img id = 'img2' src="img/thumb-2.jpg" alt="" />
                <img id = 'img3' src="img/thumb-3.jpg" alt="" />
            </div>
        </body>
    </html>
    <script type="text/javascript">
        imgNode11 = document.getElementById('img11')
        
        imgNode1 = document.getElementById('img1')
        imgNode2 = document.getElementById('img2')
        imgNode3 = document.getElementById('img3')  
        imgs = ['picture-1.jpg','picture-2.jpg','picture-3.jpg']    
        
        imgNode1.onmouseover = function(){
            imgNode11.src = 'img/'+imgs[0] 
        }
        imgNode2.onmouseover = function(){
            imgNode11.src = 'img/'+imgs[1] 
        }
        imgNode3.onmouseover = function(){
            imgNode11.src = 'img/'+imgs[2] 
        }   
    </script>
    
    

    相关文章

      网友评论

          本文标题:02-12作业1缩略图

          本文链接:https://www.haomeiwen.com/subject/bcwkeqtx.html