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实现鼠标的滑动的更多相关文章

基于jQuery鼠标滚轮滑动到页面节点部分
基于jQuery鼠标滚轮滑动到页面节点部分.这是一款基于jQuery+CSS3实现的使用鼠标滚轮或者手势滑动到页面节点部分特效.效果图如下: 在线预览源码下载实现的代码. html代码: &l ...
鼠标上下滑动总是放大缩小页面，按住ctrl+0
鼠标上下滑动总是放大缩小页面,可能是ctrl键失灵了,幸好键盘有两个ctrl键,按住ctrl+0,页面就正常了,吓死宝宝了,~~~~(>_<)~~~~
原生js获取鼠标坐标方法全面讲解-zmq
原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:eve ...
Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果
Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使 ...
JS移动客户端--触屏滑动事件 banner图效果
JS移动客户端--触屏滑动事件移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成.但是在移动设备上,要实现这种轮播的效果,就需要用到核心的t ...
js获得鼠标的位置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js中鼠标滚轮事件详解
js中鼠标滚轮事件详解 (以下内容部分内容参考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠标滚轮控制输入框取值中已使用 ...
JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
webdriver鼠标上下滑动
有时候我们需要对窗口显示的页面上下滑动,以显示当前正在处理的位置,这就需要用到webdriver模拟鼠标上下滑动 package test20161201; import org.openqa.sel ...

随机推荐

window.location.href和window.open的几种用法和区别
使用js的同学一定知道js的location.href的作用是什么,但是在js中关于location.href的用法究竟有哪几种,究竟有哪些区别,估计很多人都不知道了. 一.location.href ...
Java final,static 关键字
final关键字: 这是无法改变的”或者“终态的”含义,它可以修饰非抽象类.非抽象类成员方法和变量. final类不能被继承,没有子类,final类中的方法默认是final的.final方法不能被子类 ...
ASP: VS2015 + IIS Express 10 学习笔记
首先搞清楚 ASP 与 ASP.NET 的区别(.asp与.aspx). https://msdn.microsoft.com/en-us/library/ms973813.aspx 环境配置: ht ...
离线下载Windows 调试符号 Symbols
公司开发机没有不能连接到互联网.调试程序时那些Windows模块(如ntdll.dll)不能加载符号,而程序总是崩在这些模块里.想看一眼到底崩在了什么地方. 需要把对应的符号下载下来. 使用工具sym ...
nc:a test cmd for TCP HTTP
docker 上需要nc 测试环境--internet上搜集了一些资料 ---------------------------------------------------------------- ...
并发调用get请求
http://zeusami.iteye.com/blog/1172864 package com.alibaba.xteam.web.travel.module.rpc; import java.i ...
使用javap反编译class文件
一个普通的Java类: package org.ccnt.concurrence; public class VolatileTest { public static volatile int rac ...
object_id的用法
OBJECT_ID: 返回数据库对象标识号. 语法 OBJECT_ID ( 'object' ) 参数 'object' 要使用的对象.object 的数据类型为 char 或 nchar.如果 ob ...
spawn-fcgi
spawn-fcgi与PHP-FPM 前面介绍过,FastCGI接口方式在脚本解析服务器上启动一个或者多个守护进程对动态脚本进行解析,这些进程就是FastCGI进程管理器,或者称为FastCGI引擎. ...
C++Primer 第九章
//1.vector:可变大小数组.支持快速随机访问,在尾部之外的位置插入或删除元素可能很慢.注意点:不要在vector中存放bool类型,vector<bool>并不是一个容器,其实现方 ...

js实现鼠标的滑动

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

随机推荐

热门专题