JQuery实现电影排行榜

最新推荐文章于 2022-03-29 08:45:42 发布

Hello world

最新推荐文章于 2022-03-29 08:45:42 发布

阅读量2.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： jquery web前端

本文链接：https://blog.youkuaiyun.com/helloWolrldApe/article/details/88555365

本文介绍了如何利用JQuery实现电影排行榜的交互效果。当鼠标悬停在电影名称上时，会显示对应的电影详情；移开鼠标时，详情内容则会隐藏。这是一个学习JQuery的实践案例，代码来源于李南江老师的教学，旨在促进共同学习和进步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery实现电影排行榜
这段时间一直在学习jquery,发现jquery确实功能强大，相对于js来说jquery很多方法都封装好了。程序员可以直接拿来使用。确实方便了很多。下面记录一下这段时间学习的案例。下面是一个电影排行榜的效果图

在这里插入图片描述
当鼠标移动到“电影名称”处会展开一场的一个DIV展现出里面的内容，效果图入下：

当鼠标移出时内容隐藏，移动到不同的电影时展开不同的类容。
下面是实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .box{
            width:300px;
            height:450px;
            margin:50px auto;
            border:1px solid #000;
        }
        .box>h1{
            font-size:20px;
            line-height:35px;
            color:deeppink;
            padding-left:10px;
            border:1px dashed #ccc;