悬浮在li上,最后一个元素显示了..
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script><script>$(function () {var wrap_len = $("#index_wrap");if (wrap_len.length > 0) {var speed = 800; //下拉速度var cflul = $(".index_lul");var cflli = $(".index_lli");var cfrli = $(".index_rli");var count = cflli.length;var cflli_h = cflli.outerHeight(true);var cflul_h = cflli_h * count;var cflm_h = $(".index_flcon").outerHeight();var size = Math.ceil(cflul_h / cflm_h);var index = 0;var cur = 0;handle = null;//初始化cflul.css("height", cflul_h);cflli.each(function () {if ($(this).index() % 2 == 0) {$(this).addClass("flli_r0");} else {$(this).addClass("flli_r1");}});cflli.eq(index).addClass("flli_curr");cfrli.eq(index).show();cflli.mouseover(function () {handle = setTimeout(function () {index = $(this.cflli).index();$(this.cflli).addClass("flli_curr").siblings().removeClass("flli_curr");cfrli.eq(index).show().siblings().hide();}, 1000);}).mouseout(function () {clearTimeout(handle);});//动画函数function menushow(cur) {cflul.stop(false, true).animate({"margin-top": -cur * cflm_h}, speed);}}});</script><style>ul {list-style: none;}.flli_r0 {background: #999;}.flli_r1 {background: #333;}.flli_curr {background: #ff981f;}.index_lli {height: 50px;width: 50px;float: left;margin-right: 5px;}.index_rli{background: #d9d9d9;display: none;}</style></head><body><div id="index_wrap"><div class="index_flcon"><ul class="index_lul"><li class="index_lli">1</li><li class="index_lli">2</li><li class="index_lli">3</li><li class="index_lli">4</li></ul><ul class="index_rul"><li class="index_rli">123</li><li class="index_rli">234</li><li class="index_rli">345</li><li class="index_rli">456</li></ul></div></div></body></html>
相关分类