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 mContainer.setPersistentDrawingCache (int drawingCacheToKeep)

    mContainer.setPersistentDrawingCache(ViewGroup.PERSISTENT_ANIMATION_CACHE); persistentDrawingCache设置 ...

  2. Java遇见HTML——JSP篇之JSP状态管理

    一.http协议的无状态 无状态性是指,当浏览器发送请求给服务器的时候,服务器响应客户端请求.但是当同一个浏览器再次发送请求给服务器的时候,服务器并不知道他就是刚才的那个浏览器.简单的说,就是服务器不 ...

  3. js获取页面及个元素高度、宽度

    网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: document.body.offs ...

  4. django关闭DEBUG后 static静态文件都访问不了

    Django框架仅在开发模式下提供静态文件服务.当我开启DEBUG模式时,Django内置的服务器是提供静态文件的服务的,所以css等文件访问都没有问题,但是关闭DEBUG模式后,Django便不提供 ...

  5. 【转】Java多线程编程中易混淆的3个关键字( volatile、ThreadLocal、synchronized)总结

    概述 最近在看<ThinKing In Java>,看到多线程章节时觉得有一些概念比较容易混淆有必要总结一下,虽然都不是新的东西,不过还是蛮重要,很基本的,在开发或阅读源码中经常会遇到,在 ...

  6. 微软bing搜索搜索源码，可以直接运行

    微软联合HackerRank一起研发了一项新功能:源代码搜索.能够直接搜索代码并且进行编译运行. 如果不做说明,这项功能看上去简直就是Visual Studio中源代码搜索插件的翻版,不过其并不需要本 ...

  7. 隐藏ipad/ip顶部状态栏

    在GameViewController.swift中重载prefersStatusBarHidden方法,返回true override func prefersStatusBarHidden() - ...

  8. Sikuli增强包

    一.前提准备1)  VCForPython27.msi2)  Cython安装包3)  pyjnius安装包4)  sikuli_cpython安装包5)  SLF4J文件包二.安装过程1)  VCF ...

  9. 科学计算器的Java实现

    简易的科学计算器的实现 ---Java版 import javax.swing.*;//新的窗口组件包 import java.awt.*; import java.awt.event.*; publ ...

  10. [原创]java WEB学习笔记70：Struts2 学习之路-- 输入验证，声明式验证，声明是验证原理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...