jquery仿百度百科底部浮动导航特效

日期：2020-06-10 栏目：程序人生浏览：次

jquery类似百度百科底部导航预览，代码很简单，这里就不多废话了。

效果图：

jquery仿百度百科底部浮动导航特效

CSS

* { margin: 0; padding: 0 } .wrap { width: 1000px; overflow: hidden; margin: 0 auto; } .content { width: 780px; float: left; } .slide { width: 200px; float: right; }

HTML

<div> <div> <h2> <a></a> 1 part1 </h2> <div> content1,content1 </div> <h2> <a></a> 2 part2 </h2> <div> content2,content2 </div> <h2> <a></a>  part2-1 </h2> <div> content2-1,content2-1 </div> <h2> <a></a>  part2-2 </h2> <div> content2-2,content2-2 </div> <h2> <a></a> 3 part3 </h2> <div> content,content </div> <h2> <a></a> 4 part4 </h2> <div> content,content </div> <h2> <a></a> 5 part5 </h2> <div> content5,content5 </div> <h2> <a></a> 6 part6 </h2> <div> content6,content6 </div> <h2> <a></a> 7 part7 </h2> <div> content7,content7 </div> <h2> <a></a> 8 part8 </h2> <div> content8,content8 </div> <h2> <a></a> 9 part9 </h2> <div> content9,content9 </div> <h2> <a></a> 10 part10 </h2> <div> content10,content10 </div> <h2> <a></a> 11 part11 </h2> <div> content11,content11 </div> <h2> <a></a> 12 part12 </h2> <div> content12,content12 </div> <h2> <a></a> 13 part13 </h2> <div> content13,content13 </div> <h2> <a></a> 14 part14 </h2> <div> content14,content14 </div> <h2> <a></a> 15 part15 </h2> <div> content15,content15 bottom </div> </div> <div> <div> <div> <div> <div></div> <div></div> </div> <div> <div title="向上翻页"></div> <div title="向下翻页"></div> </div> <div> <dl>  </dl> </div> </div> <a href="javascript:void(0);"></a> <a title="返回顶部" href="javascript:void(0)"></a> </div> </div> </div>

转载注明出处：https://www.heiqu.com/wggppg.html

jquery仿百度百科底部浮动导航特效

相关推荐