用js怎么做小说网站那种排行榜？

[喵m公子]

http://www.fensebook.com/index.php/Top

就像这个网站中的排行榜那种特效 怎么用js做出来

希望有人能给个例子 万分感谢！！！！！

[无聊的上午]

就是一个列表，加上鼠标移入移出事件，移入时显示对应li下面的内容，至于数据哪些该置顶这个是后台来完成的

[Go 旅城通票]

就2个div，一个标题，一个带图，默认显示标题，带图的在添加active激活样式后切换下而已

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<style>.hot .img{display:none}.hot .active .img{display:block}.hot .active .word{display:none}</style>
<ul class="hot">
    <li class="active"><div class="word">标题1</div><div class="img">带图片的1</div></li>
    <li><div class="word">标题2</div><div class="img">带图片的2</div></li>
    <li><div class="word">标题3</div><div class="img">带图片的3</div></li>
</ul>
<script>
    $('ul.hot>li').mouseenter(function () { $(this).addClass('active').siblings().removeClass('active')})
</script>

Web开发学习资料推荐
jquery全年日期选择器日历插件
easyui datagrid fitColumns:true失效解决办法

[喵m公子]

还是没懂 有没有具体的例子呀 一点点就好

[Go 旅城通票]

引用 3 楼 qq_41688883 的回复:

还是没懂 有没有具体的例子呀 一点点就好

自己去学基础了，代码给出来你都看不懂

[weixin_45316207]

http://www.fensebook.com/index.php/Top

[weixin_45316207]

http://www.fensebook.com/index.php/Top 你这网站的书库效果怎么弄得

[horizon_zpy]

引用 3 楼 qq_41688883 的回复:

还是没懂 有没有具体的例子呀 一点点就好

<script src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<style>.hot .img{display:none}.hot .active .img{display:block}.hot .active .word{display:none}</style>
<ul class="hot">
    <li class="active"><div class="word">标题1</div><div class="img"><a href="http://www.fensebook.com/index.php/Book/Index/id/2133842">
<img src=http://avatar.fensebook.com/20190215/5c6656d3c3e15.jpg></a>
</div></li>
    <li><div class="word">标题2</div><div class="img"><a href="http://www.fensebook.com/index.php/Book/Index/id/2133842">
<img src=http://avatar.fensebook.com/20190215/5c6656d3c3e15.jpg></a>带图片的2</div></li>
    <li><div class="word">标题3</div><div class="img">带图片的3</div></li>
</ul>
<script>
    $('ul.hot>li').mouseenter(function () { $(this).addClass('active').siblings().removeClass('active')})
</script>

前面的就是例子啊，还要啥例子啊！