jQuery框架风云榜案例
生活随笔
收集整理的這篇文章主要介紹了
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="images/001.jpg" alt=""><p>《悍城》是由愛奇藝自制，劉殊巧執導，李光潔、袁文康、姜珮瑤、克拉拉、劉德凱、孫巖、高至霆、趙陽、姜卓君、梁譯木、盛鑒、高冬平、銀雪</p></div></li><li><p class="title"><span>2</span>漢城</p><div class="desc"><img src="images/002.jpg" alt=""><p>《悍城》是由愛奇藝自制，劉殊巧執導，李光潔、袁文康、姜珮瑤、克拉拉、劉德凱、孫巖、高至霆、趙陽、姜卓君、梁譯木、盛鑒、高冬平、銀雪</p></div></li><li><p class="title"><span>3</span>漢城</p><div class="desc"><img src="images/003.jpg" alt=""><p>《悍城》是由愛奇藝自制，劉殊巧執導，李光潔、袁文康、姜珮瑤、克拉拉、劉德凱、孫巖、高至霆、趙陽、姜卓君、梁譯木、盛鑒、高冬平、銀雪</p></div></li><li><p class="title"><span>4</span>漢城</p><div class="desc"><img src="images/004.jpg" alt=""><p>《悍城》是由愛奇藝自制，劉殊巧執導，李光潔、袁文康、姜珮瑤、克拉拉、劉德凱、孫巖、高至霆、趙陽、姜卓君、梁譯木、盛鑒、高冬平、銀雪</p></div></li><li><p class="title"><span>5</span>漢城</p><div class="desc"><img src="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框架风云榜案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 善用rel=’canonical’，权重
- 下一篇： 一个可以拖拽的异步按需加载树