js实现鼠标的滑动

<!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" />
  <title>滑动TAB</title>
  <script language="javascript">
  function tabChange(obj,id)
  {
  var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
  var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
  for(i=0;i<arrayul.length;i++)
  {
  if(obj==arrayli[i])
  {
  arrayli[i].className = "cli";
  arrayul[i].className = "";
  }
  else
  {
  arrayli[i].className = "";
  arrayul[i].className = "hidden";
  }
  }
  }
  </script>
  <style type="text/css">
  .tabbox {width:300px;height:250px;}
  .tabmenu {width:295px;height:28px;border-left:1px solid #CCC;border-top:1px solid #ccc;}
  .tabmenu ul {margin:0;padding:0;list-style-type: none;}
  .tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
  .tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
  #tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
  #tabcontent ul {margin:0;padding:5px;list-style-type: none;}
  #tabcontent .hidden {display:none;}
  </style>
  </head>
  <body>
  <div class="tabbox">
  <div class="tabmenu">
  <ul>
  <li onmouseover="tabChange(this,'tabcontent')" class="cli">水平网</li>
  <li onmouseover="tabChange(this,'tabcontent')">酷站欣赏</li>
  <li onmouseover="tabChange(this,'tabcontent')">源码下载</li>
  <li onmouseover="tabChange(this,'tabcontent')">网页特效</li>
  <li onmouseover="tabChange(this,'tabcontent')">电子书籍</li>
  </ul>
  </div>
  <div id="tabcontent">
  <ul name="tabul">
  <li><a href="#">www.goalercn.com</a></li>
  <li><a href="#">www.goalercn.com</a></li>
  <li><a href="#">www.goalercn.com</a></li>
  <li><a href="#">www.goalercn.com</a></li>
  <li><a href="#">www.goalercn.com</a></li>
  <li><a href="#">www.goalercn.com</a></li>
  </ul>
  <ul class="hidden">
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  </ul>
  <ul class="hidden">
  <li><a href="#">水平网www.goalercn.com</a></li>
  <li><a href="#">水平网www.goalercn.com</a></li>
  <li><a href="#">水平网www.goalercn.com</a></li>
  <li><a href="#">水平网www.goalercn.com</a></li>
  <li><a href="#">水平网www.goalercn.com</a></li>
  <li><a href="#">水平网www.goalercn.com</a></li>
  </ul>
  <ul class="hidden">
  <li><a href="#">水平网</a></li>
  <li><a href="#">水平网</a></li>
  <li><a href="#">水平网</a></li>
  <li><a href="#">水平网</a></li>
  <li><a href="#">水平网</a></li>
  <li><a href="#">水平网</a></li>
  </ul>
  <ul class="hidden">
  <li><a href="http://www.goalercn.com">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  <li><a href="#">水平网欢迎您，www.goalercn.com</a></li>
  </ul>
  </div>
  </div>
  </body>
  </html>

js实现鼠标的滑动的更多相关文章

  1. 基于jQuery鼠标滚轮滑动到页面节点部分

    基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  2. 鼠标上下滑动总是放大缩小页面，按住ctrl+0

    鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~

  3. 原生js获取鼠标坐标方法全面讲解-zmq

    原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...

  4. Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

    Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...

  5. JS移动客户端--触屏滑动事件 banner图效果

    JS移动客户端--触屏滑动事件 移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...

  6. js获得鼠标的位置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. js中鼠标滚轮事件详解

    js中鼠标滚轮事件详解   (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...

  8. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

  9. webdriver鼠标上下滑动

    有时候我们需要对窗口显示的页面上下滑动,以显示当前正在处理的位置,这就需要用到webdriver模拟鼠标上下滑动 package test20161201; import org.openqa.sel ...

随机推荐

  1. android AlarmManager 详解

    在开发互联网应用时候,我们常常要使用心跳来保证客户端与服务器的连接.怎么完成心跳很关键,在说道客户端心跳功能时,如果使用Timer或者专门开起一个线程来做心跳的工作,会浪费CPU工作时间,而且也会更多 ...

  2. H3C Series Router MSR26-00与F3736 VPN IP SEC

    注:建立链接之后经常断线,需要两边进行PING通才可以.待解决.

  3. win7 加域开机自动登录域用户

    解决办法:1.本地管理员帐户登录到本机.点击左下角的“开始”,在运行中输入“regedit”,点击确定 2.弹出“注册表编辑器”,找到下面的路径:[HKEY_LOCAL_MACHINE\SOFTWAR ...

  4. javascript设计模式学习之九——命令模式

    一.命令模式使用场景及定义 命令模式常见的使用场景是:有时候需要向某些对象发送请求,但是并不知道请求的接受者是谁,也不知道请求的具体操作是什么.此时希望用一种松耦合的方式来设计程序,使得请求的发送者和 ...

  5. 转：DLL教程

    首先:DLL技术是针对C的技术,虽然也支持C++,但是对C++的支持不够好.C++对应的是COM技术. 建议首先看一下Programming  Windows的21章,虽然没有讲MFC如何制作DLL, ...

  6. C++如何通过一个响应事件接受多个控件消息

    在空的Form里加个Button,写入void __fastcall TForm1::Button1Click(TObject *Sender){ for (long k=0; k<5; k++ ...

  7. bzoj 4237稻草人

    按x轴进行分治,将[l,r]分成[l,mid]和[mid+1,r],左下角点x值在[l,mid]中,右上角点x值在[mid+1,r],然后将[l,r]中的所有点按y轴排序,按顺序扫描,若扫描到左下角点 ...

  8. C#委托实例

    using System; using System.Collections.Generic; using System.Linq; using System.Text;   namespace we ...

  9. paper 74：MATLAB图像处理_HSV与RGB颜色空间互转

    HSV空间:分别是H(色调)——S(饱和度)——V(亮度) 与HSI颜色空间类似:分别是H(色调)——S(饱和度)——I(强度) 注意: 强度和亮度差不多是一个概念. 饱和度代表的是渗入白光的数量级, ...

  10. paper 65 ：尺度不变特征变换匹配算法[转载]

    尺度不变特征变换匹配算法 对于初学者,从David G.Lowe的论文到实现,有许多鸿沟,本文帮你跨越.1.SIFT综述 尺度不变特征转换(Scale-invariant feature transf ...