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. php ldap验证

    <?php $ldap_host = "ldap://ServerIP";//LDAP 服务器地址 $ldap_port = "389";//LDAP 服 ...

  2. Mac OS—苹果搭建Android开发环境

    如何在MAC OS X 安装Android SDK 我以往用的开发环境都是以MAC OS安装VMware来跑不同的Windows OS,目前慢慢的将所要开发的项目由以往的传统的Wintel转移到Mob ...

  3. ios-chart 不支持渐变的底色 --- 后面支持了渐变

    https://github.com/danielgindi/ios-charts/issues/186 后话,最近库更新了,可以支持渐变色

  4. [Android Tips] 3. Launch CallLog Activity

    Intent intent = new Intent(Intent.ACTION_VIEW); intent.setData(android.provider.CallLog.Calls.CONTEN ...

  5. PostgreSQL Errors and Messages

    使用RAISE语句来报告消息并抛出错误 RAISE [ level ] ’format’ [, expression [, ... ]] [ USING option = expression [, ...

  6. php 随机生成

    php随机生成6位字符串: $str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz';        $max = ...

  7. 使用 GitHub / GitLab 的 Webhooks 进行网站自动化部署

    老早就想写这个话题了,今天正好有机会研究了一下 git 的自动化部署.最终做到的效果就是,每当有新的 commit push 到 master 分支的时候,就自动在测试/生产服务器上进行 git pu ...

  8. Android Handler简单使用

    package com.example.myhandlertest3; import android.os.Bundle; import android.os.Handler; import andr ...

  9. 手把手教你用动软.NET代码生成器实例教程

    动软实战攻略 手把手教你用动软 文档编号:20110421 版权所有 © 2004-2011 动软 在线帮助:http://help.maticsoft.com 目录   一．        产品介绍 ...

  10. EBS常用小常识（转）

    值集: 1.编辑信息:取上一个值集所选的数据.(值集关联) WHERE BANK_ACCOUNT_ID = :$FLEX$.CE_BANK_ACCOUNT_NUM_NAME ORDER BY STAT ...