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. [SharpDevelop]程序入口

    在StartUp项目中,SharpDevelopMain类的Main函数.

  2. [RGEOS]绘制多边形Polygon

    绘制OGIS定义的Polygon public void DrawPolygon(Polygon pol, Brush brush, Pen pen, bool clip) { gc = Graphi ...

  3. 使用jquery的小记

    随便写点 1.给span这种标签赋值  不能用$("#id").val("abc"); 因为这种标签没有value属性 而应该用$("#id" ...

  4. PAT 解题报告 1052. Linked List Sorting (25)

    1052. Linked List Sorting (25) A linked list consists of a series of structures, which are not neces ...

  5. FtpWebRequest FTP异步下载、异步上传文件

    异步下载: public interface IPrimaryKey<T> { T GetKey(); } public class DownloadInfo : IPrimaryKey& ...

  6. maven中下载jar包源码和javadoc

    1:Maven命令下载源码和javadocs 当在IDE中使用Maven时如果想要看引用的jar包中类的源码和javadoc需要通过maven命令下载这些源码,然后再进行引入,通过mvn命令能够容易的 ...

  7. Python学习笔记总结1：字符串表示str与repr的用法比较

    参考博文地址:http://blog.csdn.net/yyt8yyt8/article/details/7030416 值转化为字符串常用以下三种方法: 1. str函数 str函数转化为合理形式的 ...

  8. 接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)?

    接口是否可继承接口? 抽像类是否可实现(implements)接口? 抽像类是否可继承实体类(concrete class)? 1. 接口可以继承接口. 2. 抽像类可以实现(implements)接 ...

  9. linux第2天 信号 wait

    孤儿进程和僵尸进程 如果父进程先退出,子进程还没退出那么子进程的父进程将变为init进程.(注:任何一个进程都必须有父进程) 如果子进程先退出,父进程还没退出,那么子进程必须等到父进程捕获到了子进程的 ...

  10. 变形--位移 translate()

    translate()函数可以将元素向指定的方向移动,类似于position中的relative.或以简单的理解为,使用translate()函数,可以把元素从原来的位置移动,而不影响在X.Y轴上的任 ...