专栏首页Nian糕的私人厨房JavaScript 鼠标滑动,图片显示隐藏

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

Unsplash

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

HTML 结构如下

<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 样式如下

*{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 元素, 显示相应的图片,并隐藏其他图片

$("#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

End of File

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS 使用 Flex 布局来制作一个骰子

    我在上一篇博文 CSS 布局_2 Flex弹性盒中,对 Flex 弹性盒有着详细的介绍,在这里,我们使用 Flex 弹性盒布局,来实现骰子的布局,一个面可以设置...

    Nian糕
  • CSS 布局_1 盒模型

    盒模式是 CSS 中一个重要的概念,即元素在页面所占据的空间位置,盒模型的属性包括:内容 (content)、填充 (padding)、边框 (border)、...

    Nian糕
  • JavaScript 鼠标悬停图片,显示隐藏文本

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    Nian糕
  • Huginn 安装笔记

    我用的 ubuntu + mysql, 按照教程安装,中途出现了很多问题,遇到问题搜索,好不容易才解决. 机器配置是 1核+ 2G,日常CPU占用<5%,内存...

    huginn 中文网
  • 简单的导航栏设计

    week
  • 重读《学习JavaScript数据结构与算法-第三版》-第2章 ECMAScript与TypeScript概述

    洛伊安妮·格罗纳女士所著的《学习JavaScript数据结构与算法》第三版于2019年的5月份再次刊印发行,新版内容契合当下,实为JavaScript开发人员的...

    胡哥有话说
  • 关于jeff的ppt的一篇阅读笔记

    从这张图可以看出,随着集群的增加,延迟增长到一定程度后趋稳,带宽速度在缓慢下载,容量在理所应当的增加。

    哒呵呵
  • 带你入门 JavaScript ES6 (一)

    ES6: 是 ECMA国际组织于 2015 年 6 月 17 日发布的 ECMAScript 第六版,正式名为 ECMAScript 2015,通常被成为 ES...

    柳公子
  • 跨站请求伪造—CSRF

    CSRF,是跨站请求伪造(Cross Site Request Forgery)的缩写,是一种劫持受信任用户向服务器发送非预期请求的攻击方式。

    FEWY
  • 如何使用纯前端控件集 WijmoJS 中的可视化在线设计器

    WijmoJS Designer,一种全新的在线Web托管工具,为WijmoJS纯前端控件集提供了可视化设计图面和 Java代码生成器。 WijmoJS Des...

    葡萄城控件

扫码关注云+社区

领取腾讯云代金券