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. 第四篇 Replication：事务复制-订阅服务器

    本篇文章是SQL Server Replication系列的第四篇,详细内容请参考原文. 订阅服务器就是复制发布项目的所有变更将传送到的服务器.每一个发布需要至少一个订阅,但是一个发布可以有多个订阅. ...

  2. 复制中的NOT FOR REPLICATION

    错误#1 10:51 2012-9-4sp_MSget_repl_commands 重复键插入解答#1 修改distribution库下sp_MSget_repl_commands 存储过程decla ...

  3. 【转载】：【C++跨平台系列】解决STL的max()与numeric_limits::max()和VC6 min/max 宏冲突问题

    http://www.cnblogs.com/cvbnm/articles/1947743.html 多年以前,Microsoft 幹了一件比 #define N 3 還要蠢的蠢事,那就是在 < ...

  4. system(linux) power on note

    读詹荣开文档摘 BIOS 在完成硬件检测和资源分配后,将硬盘 MBR 中的 Boot Loader 读到系统的 RAM 中,然后将控制权交给 OS Boot Loader Boot Loader执行全 ...

  5. IntelliJ IDEA 显示行号方法

    设置方法如下:   File->Settings->Editor->General->Appearence->Show Line Number  

  6. C++Primer 第三章

    //1.位于头文件中的代码一般不应该使用using声明.这是因为头文件的内容会拷贝到所有引用它的文件中,可能会产生始料未及的命名空间冲突. // 三种使用命名空间中的名字的方法 using names ...

  7. SQL 分组查询 group by

    select * from emp --deptno 为部门号 --输出每个部门的编号 和 该部门的平均工资 --group by deptno; 通过deptno分组 select deptno, ...

  8. stucts2 基础程序

    参考<Struts2+Hibernate+Spring> index.jsp

  9. application 统计网站访问人数

    参考书<JSP Web 开发案例教程> index.jsp welcome.jsp 显示

  10. 20145207《Java程序设计》第三周学习总结

    前言 24号回来的,书看的差不多了,博客一直没写,求老师原谅呀!!!!!哈哈哈哈.博客我从今天开始补,对着书,一天最多能弄个两篇毕竟写这个东西挺费心思德,当然我做事慢也有关系.但是我会尽快的.老实讲, ...