1、准备好需要用到的图标。
3、书写hmtl代艨位雅剖码。<div id="sss">aaaa</di即枢潋雳v><div id="img_bag" class="ztb_nav"> <a href="javascript:void(0)" onmousedown="moveTop()" style="display:block; width:30px; margin:0 auto"> <img src="images/ztb_up.png" border="0" /></a> <div id="img" class="ztb_content"> <div style="position:relative;"> <div class="online"></div> <div class="ztb_main_01"> <ul class="ztb_content_01"> <li class="ztb_over"><a href="#" class="ztb_con_text" onclick="clickli(this);">场景用例 <span class="ztb_time">2017-05-25</span></a> <ul class="ztb_content_02"> <li class="ztb_end"><a href="#">1.下拉类表测试</a></li> <li class="ztb_end"><a href="#">2.单选框列表测试</a></li> </ul> </li> <li class="ztb_on"><a href="#" class="ztb_con_text" onclick="clickli(this);">组件测试</a> <ul class="ztb_content_02" id="zb" style="display:block"> <li class="ztb_end"><a href="#">1.下拉类表测试</a></li> <li class="ztb_end"><a href="#">2.单选框列表测试</a></li> <li class="ztb_active"><a href="#">3.下拉类表测试</a></li> <li><a href="#">4.单选框列表测试</a></li> </ul> </li> <li><a href="#" class="ztb_con_text" onclick="clickli(this);">场景用例</a> <ul class="ztb_content_02"> <li><a href="#">1.下拉类表测试</a></li> <li> <a href="#">2.单选框列表测试</a></li> </ul> </li> <li> <a href="#" class="ztb_con_text" onclick="clickli(this);">组件测试</a> <ul class="ztb_content_02"> <li><a href="#">1.下拉类表测试</a></li> <li><a href="#">2.单选框列表测试</a></li> <li><a href="#">3.下拉类表测试</a></li> <li><a href="#">4.单选框列表测试</a></li> </ul> </li> <li><a href="#" class="ztb_con_text" onclick="clickli(this);">场景用例</a> <ul class="ztb_content_02"> <li><a href="#">1.下拉类表测试</a></li> <li> <a href="#">2.单选框列表测试</a></li> </ul> </li> <li> <a href="#"></a><a href="#" class="ztb_con_text" onclick="clickli(this);">组件测试</a> <ul class="ztb_content_02"> <li><a href="#">1.下拉类表测试</a></li> <li> <a href="#">2.单选框列表测试</a></li> </ul> </li> <li> <a href="#"></a><a href="#" class="ztb_con_text" onclick="clickli(this);">组件测试</a> <ul class="ztb_content_02"> <li><a href="#">1.下拉类表测试</a></li> <li> <a href="#">2.单选框列表测试</a></li> </ul> </li> <li> <a href="#"></a><a href="#" class="ztb_con_text" onclick="clickli(this);">组件测试</a> <ul class="ztb_content_02"> <li class="ztb_online"><a href="#">1.下拉类表测试</a></li> <li> <a href="#">2.单选框列表测试</a></li> </ul> </li> </ul> </div> </div> </div> <a href="javascript:void(0)" onmousedown="moveBottom()" style="position:absolute; bottom:0px; right:110px"> <img src="images/ztb_down.png" border="0" /></a> </div>
5、书写并添加js代码。<script src="js/jquery-1.9.1.min.js" ></script><script > $(function(){ $('ul.ztb_content_02 li').click(function(){ $(this).addClass('ztb_online').siblings('li.ztb_online').removeClass('ztb_online'); $(this).parents('li').siblings('li').children('ul').find('li.ztb_online').removeClass('ztb_online'); }) }) </script><script> function clickli(dom){ var ul = $(dom).next('ul'); if (ul.is(":hidden")) { ul.css('display','block') }else{ ul.css('display','none') } } </script><script > function js(obj){return document.getElementById(obj)}var maxHeight=js("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;//滚动图片的最大高度var targety = 211;//一次滚动距离var dx;var a=null;function moveTop(){var le=parseInt(js("img").scrollTop);if(le>211){targety=parseInt(js("img").scrollTop)-211;}else{targety=parseInt(js("img").scrollTop)-le-1;}scTop();}function scTop(){dx=parseInt(js("img").scrollTop)-targety;js("img").scrollTop-=dx*.3;clearScroll=setTimeout(scTop,50);if(dx*.3<1){clearTimeout(clearScroll);}}function moveBottom(){var le=parseInt(js("img").scrollTop)+211;var maxL=maxHeight-600;if(le<maxL){targety=parseInt(js("img").scrollTop)+211;}else{targety=maxL}scBottom();}function scBottom(){dx=targety-parseInt(js("img").scrollTop);js("img").scrollTop+=dx*.3;a=setTimeout(scBottom,50);if(dx*.3<1){clearTimeout(a)}}</script>
7、查看效果。
