jquery/css电影排行榜

最新推荐文章于 2024-07-21 00:07:56 发布

前端路上的net

最新推荐文章于 2024-07-21 00:07:56 发布

阅读量1.2k

点赞数 1

分类专栏：前端学习文章标签：电影排行榜

本文链接：https://blog.csdn.net/qq_35878240/article/details/81461225

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

今天心血来潮，随便写点干货，致敬大牛，鼓励和我一样奋斗在路上的朋友。

写了一个电影排行榜，适合初学者一起学习，网上很多类似的吗，我没看，直接仿制了一个。话不多说，上图：

下面直接贴上源码，因为比较简单，就不多做解释。如果有问题，直接留言，喜欢我就关注我吧。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("a").mouseover(function () {
                $(this).next("div").css("display", "block");
            })
            $("a").mouseout(function () {
                $(this).next("div").css("display", "none");
            })

            //$("a").click(function () {
            //    $(this).next("div").css("display", "block");
            //})
            

            //当动态加载列表的时候需要使用这个方法绑定
            //$("ul").on("click", "a", function () {
            //    $(this).next("div").css("display", "block");
            //})

        })
    </script>
    <style>
        .hid-div{
            display:none;
        }
        li{
            border-top:1px dashed #808080;    
            width:400px;          
            text-align:left;
            display:block;
        }
        ul{          
            list-style:none;
        }
        .body-div{
             /*width:300px;
            height:700px;*/
        }
        span{
            display:inline-block;
            background:#ff0000;
            width:30px;
            height:30px;
            line-height:30px;
            text-align:center;
        }
        a:hover{
            cursor:pointer;
        }
        img{
            width:120px;
            height:180px;            
        }
        .img-div{
            float:left;
        }
        .text-div{
            margin-left:10px;
            float:left;
        }
        .hid-div::after{
            content:"";
            clear:both;
            display:block;
        }
    </style>

</head>
<body>
    <div class="body-div">
        <ul>
            电影排行榜
            <li>
                <span>1</span><a>西红柿首付</a>
                <div class="hid-div">
                    <div class="img-div">
                        <img src="img/timg.jpg"/>
                    </div>
                    <div class="text-div">类型：电影</br>作品导演：闫非，彭大魔</br>简介：《西虹市首富》</br>是由闫非、彭大魔编剧兼</br>执导，沈腾，宋芸桦，</br>张一鸣，常远，张晨光，</br>魏翔，王成思，陶亮，徐</br>冬冬，艾伦等主演的喜</div>
                </div>
            </li>
            <li>
                <span>2</span><a>西红柿首付</a>
                <div class="hid-div">
                    <div class="img-div">
                        <img src="img/timg.jpg" />
                    </div>
                    <div class="text-div">类型：电影</br>作品导演：闫非，彭大魔</br>简介：《西虹市首富》</br>是由闫非、彭大魔编剧兼</br>执导，沈腾，宋芸桦，</br>张一鸣，常远，张晨光，</br>魏翔，王成思，陶亮，徐</br>冬冬，艾伦等主演的喜</div>
                </div>
            </li>
            <li>
                <span>3</span><a>西红柿首付</a>
                <div class="hid-div">
                    <div class="img-div">
                        <img src="img/timg.jpg" />
                    </div>
                    <div class="text-div">类型：电影</br>作品导演：闫非，彭大魔</br>简介：《西虹市首富》</br>是由闫非、彭大魔编剧兼</br>执导，沈腾，宋芸桦，</br>张一鸣，常远，张晨光，</br>魏翔，王成思，陶亮，徐</br>冬冬，艾伦等主演的喜</div>
                </div>
            </li>
            <li>
                <span style="background-color:#808080">4</span><a>西红柿首付</a>
                <div class="hid-div">
                    <div class="img-div">
                        <img src="img/timg.jpg" />
                    </div>
                    <div class="text-div">类型：电影</br>作品导演：闫非，彭大魔</br>简介：《西虹市首富》</br>是由闫非、彭大魔编剧兼</br>执导，沈腾，宋芸桦，</br>张一鸣，常远，张晨光，</br>魏翔，王成思，陶亮，徐</br>冬冬，艾伦等主演的喜</div>
                </div>
            </li>
            <li>
                <span style="background-color:#808080">5</span><a>西红柿首付</a>
                <div class="hid-div">
                    <div class="img-div">
                        <img src="img/timg.jpg" />
                    </div>
                    <div class="text-div">类型：电影</br>作品导演：闫非，彭大魔</br>简介：《西虹市首富》</br>是由闫非、彭大魔编剧兼</br>执导，沈腾，宋芸桦，</br>张一鸣，常远，张晨光，</br>魏翔，王成思，陶亮，徐</br>冬冬，艾伦等主演的喜</div>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>