JavaScript 鼠标滑动，图片显示隐藏

当一个区域需要展示多张图片，而该区域的空间大小受到限制时，我们可以通过这种方式来达到预览哪张图片就展示该图片，并隐藏其他图片的方式来达到目的，这就是简化版的手风琴效果

HTML 结构如下

代码语言：javascript复制

<div id="Tabs">
    <ul>
        <li class="bg">
            <p>
                <span class="hover"><a href="http://www.jianshu.com/u/b0c7095032f3">第一个年糕</a></span>
            </p>
            <img src="images/n1.jpg" class="xs">
        </li>
        <li>
            <p>
                <span><a href="http://www.jianshu.com/u/b0c7095032f3">第二个年糕</a></span>
            </p>
            <img src="images/n2.jpg">
        </li>
        <li>
            <p>
                <span><a href="http://www.jianshu.com/u/b0c7095032f3">第三个年糕</a></span>
            </p>
                <img src="images/n3.jpg">
        </li>
    </ul>
</div>

CSS 样式如下

代码语言：javascript复制

*{margin:0px; padding:0px;}
#Tabs{width:300px; height:305px;border:1px solid #ddd;margin:50px auto;}
#Tabs ul li{list-style-type:none;padding:0px 10px 0px 10px;}
#Tabs ul li a{color:#2d2d2d;font-size:14px; text-decoration:none;}
#Tabs ul li a:hover{color:#eb1c24;}     
#Tabs ul li span.hover a{color:#eb1c24;}
#Tabs ul li span a{color:#726168;}
#Tabs ul li span a:hover{color:#eb1c24;}
#Tabs ul li p{line-height:30px;}
#Tabs ul li img{width:278px;height:170px;display:none;}
#Tabs ul li img.xs{display:block;}

引入 jQuery 库，通过 $(this) 获取到鼠标所悬停的 li 元素，显示相应的图片，并隐藏其他图片

代码语言：javascript复制

$("#Tabs ul li").mouseover(function(){
    $("#Tabs ul li p span").removeClass("hover");
    $(this).find("p span").addClass("hover");
    $("#Tabs ul li img").hide();
    $(this).find("img").show();
    $("#Tabs ul li").removeClass("bg");
    $(this).addClass("bg");
});

本篇的内容到这里就全部结束了，源码我已经发到了 GitHub Source_code 上了，有需要的同学可自行下载，预览效果可点击 effect

html

0 人点赞