仿阿里巴巴鼠标感应字母检索排序切换特效

7个月前 (04-13 13:25)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

很实用的根据字母排序切换显示内容特效，鼠标经过字母切换显示相关内容，兼容当前主流浏览器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>仿阿里巴巴鼠标感应字母检索排序切换特效_武鸣人</title>
<style type="text/css">
body{margin:0px 0px 0px 0px;padding:0;font-size:12px;font-family:"宋体"}
div{ margin:0 auto;}
p,form,ul,dl,ol,li,dt,dd,h1,h2,h3{margin:0;padding:0;list-style:none;}
h2,h3{font-size:13px;font-weight:bold;}
img{border:0;}
a{color:#4a4949;text-decoration:none;}
a:hover{color:#ff3300;text-decoration:underline;}
.www_wuming_ren{position:relative;top:0;left:0;width:900px; margin:0 auto}
.wwwwumingren{background:#f4f4f4}
.wwwwumingren{font-size:14px;height:37px;line-height:36px;padding:0 8px;border-left:1px solid #D2D2D2;border-right:1px solid #D2D2D2;background-position:0 -286px;font-family:helvetica,arial;font-size:16px;}
.wwwwumingren ul{position:relative;top:1px;width:100%;height:37px;overflow:hidden;z-index:13;}
.wwwwumingren li{float:left;width:30px;text-align:center;}
.wwwwumingren li.t{width:85px;}
.wwwwumingren strong{padding:0 0 0 8px;}
.wwwwumingren span{display:inline-block;cursor:pointer;font-weight:bold;color:#666666; border-top:#f4f4f4 solid 1px}
.wwwwumingren span.on{width:28px;border:1px solid #EAB295;border-bottom:1px solid #FFF6de;background-color:#FFF6DE;}
.char_wuming{position:absolute;width:888px;left:0;top:37px;padding:5px;line-height:25px;border:1px solid #EAB295;background-color:#FFF6de;z-index:10;font-size:12px;}
.char_wuming li{float:left;width:103px;text-align:center;white-space:nowrap;overflow:hidden;}
.char_wuming li.none{overflow:visible;width:100%;text-align:center;}
</style>
<script>
 function show_wuming_ren(obj, num) {
tm = window.setTimeout(function ()
{
     obj.className = 'on';
document.getElementById('index-' + num).style.display = 'block';
}, 250);
 }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
 function hideIndex(obj, num, e) {
 clearTimeout(tm);
 var owrap = document.getElementById('index-' + num);
 if (/Firefox/.test(window.navigator.userAgent)) {
 if (!(owrap.compareDocumentPosition(e.relatedTarget) & 16) && owrap != e.relatedTarget) {
 obj.className = "";
 owrap.style.display = 'none';
 return;
 }
 owrap.onmouseout = function(evt) {
 if (!(this.compareDocumentPosition(evt.relatedTarget) & 16) && this != evt.relatedTarget) {
 obj.className = "";
 this.style.display = 'none';
 }
 }
 return;
 }
 if (owrap.contains(e.toElement)) {
 owrap.onmouseout = function() {
 if (this.contains(event.toElement)) {
 return;
 }
 this.style.display = 'none';
 obj.className = '';
 }
 return;
 }
 obj.className = '';
 owrap.style.display = 'none';
 }//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="www_wuming_ren">
<div class="wwwwumingren">
<ul>
<li><span onMouseOver="show_wuming_ren(this,'a')" onmouseout="hideIndex(this,'a',event)">A</span></li>
<li><span onMouseOver="show_wuming_ren(this,'b')" onmouseout="hideIndex(this,'b',event)">B</span></li>
<li><span onMouseOver="show_wuming_ren(this,'c')" onmouseout="hideIndex(this,'c',event)">C</span></li>
<li><span onMouseOver="show_wuming_ren(this,'d')" onmouseout="hideIndex(this,'d',event)">D</span></li>
<li><span onMouseOver="show_wuming_ren(this,'e')" onmouseout="hideIndex(this,'e',event)">E</span></li>
<li><span onMouseOver="show_wuming_ren(this,'f')" onmouseout="hideIndex(this,'f',event)">F</span></li>
<li><span onMouseOver="show_wuming_ren(this,'g')" onmouseout="hideIndex(this,'g',event)">G</span></li>
<li><span onMouseOver="show_wuming_ren(this,'h')" onmouseout="hideIndex(this,'h',event)">H</span></li>
<li><span onMouseOver="show_wuming_ren(this,'i')" onmouseout="hideIndex(this,'i',event)">I</span></li>
<li><span onMouseOver="show_wuming_ren(this,'j')" onmouseout="hideIndex(this,'j',event)">J</span></li>
<li><span onMouseOver="show_wuming_ren(this,'k')" onmouseout="hideIndex(this,'k',event)">K</span></li>
<li><span onMouseOver="show_wuming_ren(this,'l')" onmouseout="hideIndex(this,'l',event)">L</span></li>
<li><span onMouseOver="show_wuming_ren(this,'m')" onmouseout="hideIndex(this,'m',event)">M</span></li>
<li><span onMouseOver="show_wuming_ren(this,'n')" onmouseout="hideIndex(this,'n',event)">N</span></li>
<li><span onMouseOver="show_wuming_ren(this,'o')" onmouseout="hideIndex(this,'o',event)">O</span></li>
<li><span onMouseOver="show_wuming_ren(this,'p')" onmouseout="hideIndex(this,'p',event)">P</span></li>
<li><span onMouseOver="show_wuming_ren(this,'q')" onmouseout="hideIndex(this,'q',event)">Q</span></li>
<li><span onMouseOver="show_wuming_ren(this,'r')" onmouseout="hideIndex(this,'r',event)">R</span></li>
<li><span onMouseOver="show_wuming_ren(this,'s')" onmouseout="hideIndex(this,'s',event)">S</span></li>
<li><span onMouseOver="show_wuming_ren(this,'t')" onmouseout="hideIndex(this,'t',event)">T</span></li>
<li><span onMouseOver="show_wuming_ren(this,'u')" onmouseout="hideIndex(this,'u',event)">U</span></li>
<li><span onMouseOver="show_wuming_ren(this,'v')" onmouseout="hideIndex(this,'v',event)">V</span></li>
<li><span onMouseOver="show_wuming_ren(this,'w')" onmouseout="hideIndex(this,'w',event)">W</span></li>
<li><span onMouseOver="show_wuming_ren(this,'x')" onmouseout="hideIndex(this,'x',event)">X</span></li>
<li><span onMouseOver="show_wuming_ren(this,'y')" onmouseout="hideIndex(this,'y',event)">Y</span></li>
<li><span onMouseOver="show_wuming_ren(this,'z')" onmouseout="hideIndex(this,'z',event)">Z</span> </li>
<li><span onMouseOver="show_wuming_ren(this,'wuming')" onmouseout="hideIndex(this,'wuming',event)">武</span> </li>
</ul>
</div>
<div class="char_wuming" id="index-a" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是A内容
</div>
<div class="char_wuming" id="index-b" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是B内容
</div>
<div class="char_wuming" id="index-c" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是C内容
</div>
<div class="char_wuming" id="index-d" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是D内容
</div>
<div class="char_wuming" id="index-e" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是E内容
</div>
<div class="char_wuming" id="index-f" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是F内容
</div>
<div class="char_wuming" id="index-g" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是G内容
</div>
<div class="char_wuming" id="index-h" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是H内容
</div>
<div class="char_wuming" id="index-i" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是I内容
</div>
<div class="char_wuming" id="index-j" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是J内容
</ul></div>
<div class="char_wuming" id="index-k" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是K内容
</div>
<div class="char_wuming" id="index-l" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是L内容
</div>
<div class="char_wuming" id="index-m" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是M内容
</div>
<div class="char_wuming" id="index-n" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是N内容
</div>
<div class="char_wuming" id="index-o" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是O内容
</div>
<div class="char_wuming" id="index-p" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是P内容
</div>
<div class="char_wuming" id="index-q" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是Q内容
</div>
<div class="char_wuming" id="index-r" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是R内容
</div>
<div class="char_wuming" id="index-s" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是S内容
</div>
<div class="char_wuming" id="index-t" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是T内容
</div>
<div class="char_wuming" id="index-u" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是U内容
</div>
<div class="char_wuming" id="index-v" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是V内容
</div>
<div class="char_wuming" id="index-w" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是W内容
</div>
<div class="char_wuming" id="index-x" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是X内容
</div>
<div class="char_wuming" id="index-y" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是Y内容
</div>
<div class="char_wuming" id="index-z" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是Z内容
</div>
    <div class="char_wuming" id="index-wuming" style="display: none">
<a href="https://www.wuming.ren" target="_blank">武鸣人</a>，各种信息免费发布！这是武鸣人内容，哈哈~
</div>
</div>
</body>
</html>


赞0
踩0
☆收藏0

本文来自武鸣人网站，转载请注明出处

本文地址：https://www.wuming.ren/a/723.html

检索排序切换鼠标感应
回帖

仿阿里巴巴鼠标感应字母检索排序切换特效 期待您的回复！

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息