web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)

本文链接：https://blog.csdn.net/u014785563/article/details/53405585

本文探讨了如何使用JavaScript为网页链接创建预览图片的动画效果。通过CSS overflow属性控制图片显示，实现‘集体照’形式的预览。当鼠标悬停时，仅显示对应部分。同时，解决了快速移动鼠标时动画滞后的问题，通过clearTimeout避免事件积累。文章还介绍了如何优化动画速度并添加安全检查，以及如何在HTML中分离结构层、行为层和表示层。

摘要由CSDN通过智能技术生成

web前端之JavaScript DOM编程艺术之用JavaScript实现动画效果拓展(预览图片)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web design</title>
</head>
<body>
    <h1>Web Design</h1>
    <p>These are the things you should konw</p>
    <ol id="linklist">
        <li>
            <a href="structure.html">structure</a>
        </li>
        <li>
            <a href="presentation.html">presentation</a>
        </li>
        <li>
            <a href="behavior.html">behavior</a>
        </li>
    </ol>
</body>
</html>

如果为每一个链接分别设置一张预览图片，在切换显示的时候总会有一点延迟。除此之外，简单的切换显示这些图片也不是我们预期的效果。我们想要实现以下功能：

1.为所有的预览图片实现一张“集体照”形式的图片。
2.隐藏这张“集体照”的绝大部分。
3.当用户鼠标悬停在某个链接上面，只显示这张“集体照”图片的相应部分。

在页面中显示这张图片之后，我们就需要使用CSS的overflow属性用来处理一个元素的尺寸超出其容器尺寸的情况。当一个元素包含的内容器超出自身的大小时，就会发出溢出，这种情况下，对内容进行裁剪，只让一部分内容可见。

overflow的有以下四种属性：
visible：不裁剪溢出的内容。浏览器将把溢出的内容呈现在其容器元素的显示区域外，全部内容都可见。
hidden：隐藏溢出的内容。内容只显示在其容器元素的显示区域内，这就意味了一部分内容课件。
scroll：类似于hidden，浏览器将对溢出的内容进行隐藏，但是显示一个滚动条以便用户进行查看溢出部分的内容。
auto：类似于scroll，但浏览器只确实发生溢出时才显示滚动条。如果内容没有溢出，就不显示滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web design</title>
    <style type="text/css">
    #slideshow{
        width: 100px;
        height: 100px;
        position: relative;
        overflow: hidden;/*将溢出的部分隐藏*/
    }
    </style>
    <script type="text/javascript">
    function prepareSlideshow(){
    
        //确保浏览器支持DOM方法
        if(!document.getElementById) return false;
        if(!document.getElementsByTagName) return false;
        //确保元素的存在