jQuery框架风云榜案例

<title>电影风云榜</title><style>/*清空默认样式*/*{padding:0;margin:0;border:0;list-style:none;}/*设置div盒子宽度和边框和盒子居中*/.all{width:320px;height:auto;border:1px solid #ccc;margin:50px auto;}/*设置每个li底部虚线*/.all li{border-top:1px dashed #cccccc;overflow: hidden;}/*设置h3高度和颜色*/.all h3{height: 40px;color:deeppink;line-height:40px;text-align: center;}/*设置文字*/.title{height: 40px;line-height: 40px;}/*设置文字左边span样式*/.title span{width: 20px;height: 20px;background: #ccc;color:#ffff;text-align:center;line-height:20px;float: left;margin-top: 10px;}/* 选择前三个li的title类名里面的span *//*设置前三个span颜色*/.all li:nth-of-type(-n+3) .title span{background: deeppink;}/*设置图片宽度浮动元素*/.desc img{width: 100px;float: left;margin-right:10px;padding-bottom: 10px;}.desc p{font-size:14px;line-height: 26px;color: #666666;}.desc{display: none;}/* 选择第一个li里面的desc设置显示 */.all li:nth-of-type(1) .desc{display: block;}</style><script src="../js/jquery-3.4.1.js"></script>
</head>
<body>
<div class="all"><h3>电影风云榜</h3><ul class="allIn"><li><p class="title"><span>1</span>汉城</p><div class="desc"><img src="data:images/001.jpg" alt=""><p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p></div></li><li><p class="title"><span>2</span>汉城</p><div class="desc"><img src="data:images/002.jpg" alt=""><p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p></div></li><li><p class="title"><span>3</span>汉城</p><div class="desc"><img src="data:images/003.jpg" alt=""><p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p></div></li><li><p class="title"><span>4</span>汉城</p><div class="desc"><img src="data:images/004.jpg" alt=""><p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p></div></li><li><p class="title"><span>5</span>汉城</p><div class="desc"><img src="data:images/005.jpg" alt=""><p>《悍城》是由爱奇艺自制，刘殊巧执导，李光洁、袁文康、姜珮瑶、克拉拉、刘德凯、孙岩、高至霆、赵阳、姜卓君、梁译木、盛鉴、高冬平、银雪</p></div></li></ul>
</div>
<script>//鼠标移上li,控制当前li里面的desc显示,其他兄弟li里面的desc隐藏$(".all li").mouseenter(function () {// $(DOM标签对象)  li标签的子节点 .desc$(this).children(".desc").show();//li标签子节点的兄弟节点，隐藏$(this).siblings().children(".desc").hide();});

转载于:https://www.cnblogs.com/liout/p/11061018.html

jQuery框架风云榜案例相关推荐

【Spark分布式内存计算框架——Spark Streaming】9. 获取偏移量应用案例：百度搜索风云榜（上）
4.4 获取偏移量当SparkStreaming集成Kafka时,无论是Old Consumer API中Direct方式还是New Consumer API方式获取的数据,每批次的数据封装在Kaf ...
【Spark分布式内存计算框架——Spark Streaming】10. 应用案例：百度搜索风云榜（中）实时数据ETL存储
5.3 实时数据ETL存储实时从Kafka Topic消费数据,提取ip地址字段,调用[ip2Region]库解析为省份和城市,存储到HDFS文件中,设置批处理时间间隔BatchInterval为1 ...
使用Jquery+EasyUI进行框架项目开发案例解说之中的一个---员工管理源代码分享
使用Jquery+EasyUI 进行框架项目开发案例解说之中的一个员工管理源代码分享在開始解说之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery ...
Spark Streaming系列-5、应用案例：百度搜索风云榜
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 传送门:大数据系列文章目录官方网址:http://spark.apache.org/. ht ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之三---角色管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之三角色管理源码分享在上两篇文章 <使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享> & ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二---用户管理源码分享
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了 ...
使用Jquery+EasyUI 进行框架项目开发案例讲解之二用户管理源码分享
在上一篇文章<使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享>我们分享了使用Jquery EasyUI来进行开发的相关方法,同时对入群的用户提供了使用J ...
“2018中国AI英雄风云榜”年度人物榜：“AI天才”何恺明
编者按:2018年12月28日,由网易智能.清华大学数据科学研究院和24家评审机构共同评出的"2018中国AI英雄风云榜"年度人物榜单揭晓,10位人工智能领域的从业者获奖.其中,何 ...
jQuery Mobile手机网站案例
jQuery Mobile手机网站案例一.总结一句话总结:jQuery Mobile是纯手机框架,和amazeui和bootstrap都可以做手机网站. 1.另一款文本编辑器? jd编辑器二.j ...

jQuery框架风云榜案例

jQuery框架风云榜案例相关推荐

最新文章

热门文章