1顶

js+css仿阿里巴巴鼠标感应字母切换特效

稿源：互联网 2022-04-02 21:40:51 点击： 3121 撤稿纠错

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

以下讨论的是和阿里巴巴鼠标感应切换相关的js+css仿阿里巴巴鼠标感应字母切换特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" />
<title>网页特效 js+css仿阿里巴巴鼠标感应字母切换选择特效 站长特效网</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_zzjs_net{position:relative;top:0;left:0;width:900px; margin:0 auto}
.wwwzzjsnet{background:#f4f4f4}
.wwwzzjsnet{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;}
.wwwzzjsnet ul{position:relative;top:1px;width:100%;height:37px;overflow:hidden;z-index:13;}
.wwwzzjsnet li{float:left;width:30px;text-align:center;}
.wwwzzjsnet li.t{width:85px;}
.wwwzzjsnet strong{padding:0 0 0 8px;}
.wwwzzjsnet span{display:inline-block;cursor:pointer;font-weight:bold;color:#666666; border-top:#f4f4f4 solid 1px}
.wwwzzjsnet span.on{width:28px;border:1px solid #EAB295;border-bottom:1px solid #FFF6de;background-color:#FFF6DE;}
.char_zzjs{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_zzjs li{float:left;width:103px;text-align:center;white-space:nowrap;overflow:hidden;}
.char_zzjs li.none{overflow:visible;width:100%;text-align:center;}
</style>
<script>
 function show_zzjs_net(obj, num) {
 tm = window.setTimeout(function ()
 {
      obj.className = 'on';
  document.getElementById('index-' + num).style.display = 'block';
 }, 250);
 }//欢迎来到站长特x效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
 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';
 }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>

<div class="www_zzjs_net">
 <div class="wwwzzjsnet">
  <ul>
<li><span onMouseOver="show_zzjs_net(this,'a')" onmouseout="hideIndex(this,'a',event)">A</span></li>
<li><span onMouseOver="show_zzjs_net(this,'b')" onmouseout="hideIndex(this,'b',event)">B</span></li>
<li><span onMouseOver="show_zzjs_net(this,'c')" onmouseout="hideIndex(this,'c',event)">C</span></li>
<li><span onMouseOver="show_zzjs_net(this,'d')" onmouseout="hideIndex(this,'d',event)">D</span></li>
<li><span onMouseOver="show_zzjs_net(this,'e')" onmouseout="hideIndex(this,'e',event)">E</span></li>
<li><span onMouseOver="show_zzjs_net(this,'f')" onmouseout="hideIndex(this,'f',event)">F</span></li>
<li><span onMouseOver="show_zzjs_net(this,'g')" onmouseout="hideIndex(this,'g',event)">G</span></li>
<li><span onMouseOver="show_zzjs_net(this,'h')" onmouseout="hideIndex(this,'h',event)">H</span></li>
<li><span onMouseOver="show_zzjs_net(this,'i')" onmouseout="hideIndex(this,'i',event)">I</span></li>
<li><span onMouseOver="show_zzjs_net(this,'j')" onmouseout="hideIndex(this,'j',event)">J</span></li>
<li><span onMouseOver="show_zzjs_net(this,'k')" onmouseout="hideIndex(this,'k',event)">K</span></li>
<li><span onMouseOver="show_zzjs_net(this,'l')" onmouseout="hideIndex(this,'l',event)">L</span></li>
<li><span onMouseOver="show_zzjs_net(this,'m')" onmouseout="hideIndex(this,'m',event)">M</span></li>
<li><span onMouseOver="show_zzjs_net(this,'n')" onmouseout="hideIndex(this,'n',event)">N</span></li>
<li><span onMouseOver="show_zzjs_net(this,'o')" onmouseout="hideIndex(this,'o',event)">O</span></li>
<li><span onMouseOver="show_zzjs_net(this,'p')" onmouseout="hideIndex(this,'p',event)">P</span></li>
<li><span onMouseOver="show_zzjs_net(this,'q')" onmouseout="hideIndex(this,'q',event)">Q</span></li>
<li><span onMouseOver="show_zzjs_net(this,'r')" onmouseout="hideIndex(this,'r',event)">R</span></li>
<li><span onMouseOver="show_zzjs_net(this,'s')" onmouseout="hideIndex(this,'s',event)">S</span></li>
<li><span onMouseOver="show_zzjs_net(this,'t')" onmouseout="hideIndex(this,'t',event)">T</span></li>
<li><span onMouseOver="show_zzjs_net(this,'u')" onmouseout="hideIndex(this,'u',event)">U</span></li>
<li><span onMouseOver="show_zzjs_net(this,'v')" onmouseout="hideIndex(this,'v',event)">V</span></li>
<li><span onMouseOver="show_zzjs_net(this,'w')" onmouseout="hideIndex(this,'w',event)">W</span></li>
<li><span onMouseOver="show_zzjs_net(this,'x')" onmouseout="hideIndex(this,'x',event)">X</span></li>
<li><span onMouseOver="show_zzjs_net(this,'y')" onmouseout="hideIndex(this,'y',event)">Y</span></li>
<li><span onMouseOver="show_zzjs_net(this,'z')" onmouseout="hideIndex(this,'z',event)">Z</span> </li>
<li><span onMouseOver="show_zzjs_net(this,'zzjs')" onmouseout="hideIndex(this,'zzjs',event)">站长特效网</span> </li>
</ul>
 </div>
 <div class="char_zzjs" id="index-a" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是A内容
 </div>
 <div class="char_zzjs" id="index-b" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是B内容
 </div>
 <div class="char_zzjs" id="index-c" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是C内容
 </div>
 <div class="char_zzjs" id="index-d" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是D内容
 </div>
 <div class="char_zzjs" id="index-e" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是E内容
 </div>
 <div class="char_zzjs" id="index-f" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是F内容
 </div>
 <div class="char_zzjs" id="index-g" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是G内容
 </div>
 <div class="char_zzjs" id="index-h" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是H内容
 </div>
 <div class="char_zzjs" id="index-i" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是I内容
 </div>
 <div class="char_zzjs" id="index-j" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是J内容
 </ul></div>
 <div class="char_zzjs" id="index-k" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是K内容
 </div>
 <div class="char_zzjs" id="index-l" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是L内容
 </div>
 <div class="char_zzjs" id="index-m" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是M内容
 </div>
 <div class="char_zzjs" id="index-n" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是N内容
 </div>
 <div class="char_zzjs" id="index-o" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是O内容
 </div>
 <div class="char_zzjs" id="index-p" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是P内容
 </div>
 <div class="char_zzjs" id="index-q" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是Q内容
 </div>
 <div class="char_zzjs" id="index-r" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是R内容
 </div>
 <div class="char_zzjs" id="index-s" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是S内容
 </div>
 <div class="char_zzjs" id="index-t" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是T内容
 </div>
 <div class="char_zzjs" id="index-u" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是U内容
 </div>
 <div class="char_zzjs" id="index-v" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是V内容
 </div>
 <div class="char_zzjs" id="index-w" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是W内容
 </div>
 <div class="char_zzjs" id="index-x" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是X内容
 </div>
 <div class="char_zzjs" id="index-y" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是Y内容
 </div>
 <div class="char_zzjs" id="index-z" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是Z内容
 </div>
    <div class="char_zzjs" id="index-zzjs" style="display: none">
 <a href="http://www.zzjs.net" target="_blank">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！这是站长特效网内容，哈哈~
 </div>
</div>
</body>
</html>

关于js+css仿阿里巴巴鼠标感应字母切换特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011011066752.shtml方便下次再访问哦。

·上一篇： jquery简单淡入淡出菜单
·下一篇： 带三角形箭头滑动门特效

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

js+css仿阿里巴巴鼠标感应字母切换特效

文章分类LIST >>返回首页

最新游戏

最新新闻