js实现鼠标的滑动
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 ...
随机推荐
- 3、DOM操作
一.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...
- Xcode 6.x 添加Empty Application模板
Xcode 6.x 添加Empty Application模板 在Apple最新的XCode6.x中没有了Empty Application模板,这对一个老人来说是不能别接受的,同时也可以看出Appl ...
- 虚拟化技术比较 PV HVM
很多人看到同样配置的VPS价格相差很大,甚是不理解,其实VPS使用的虚拟技术种类有很多,如OpenVZ.Xen.KVM.Xen和HVM与PV.在XEN中pv是半虚拟化,hvm是全虚拟化,pv只能用于L ...
- HTML是什么
HTML(Hyper Text Mark-up Language )即超文本标记语言,是 WWW 的描述语言,由 Tim Berners-lee提出.设计 HTML 语言的目的是为了能把存放在一台电脑 ...
- H2的MVStore
翻译自http://www.h2database.com/html/mvstore.html 转载请著名出处,及译者信息. 第一次翻译,诸多不妥请谅解,谢谢. 概述 MVStore是一个持久化的.日志 ...
- java Double封装类的对象保留两位小数
double value = 22.365454; DecimalFormat df = new DecimalFormat("##.00");value = Double.par ...
- UltraEdit常用配置&搭建Java/C开发环境
一:个人使用UE期间总结了以下经常使用的配置 1.手动配置语法高亮 [高级]->[配置]->[编辑器显示]->[语法高亮]->[词语列表的完整路径]->[浏览]找到安装目 ...
- CCF真题之相邻数对
201409-1 问题描述 给定n个不同的整数,问这些数中有多少对整数,它们的值正好相差1. 输入格式 输入的第一行包含一个整数n,表示给定整数的个数. 第二行包含所给定的n个整数. 输出格式 输出一 ...
- 给uefi引导的方式安装archlinux
基本就是照着官方的wiki来的,不过官方的wiki的内容太杂了,或许我们需要的是一个瀑布似的流程. 其实大体上与mbr引导的方式类似,只凭借回忆说一下有区别的地方,等下一次有机会的时候再验证一下. 换 ...
- zw版【转发·台湾nvp系列Delphi例程】HALCON ClipRegion
zw版[转发·台湾nvp系列Delphi例程]HALCON ClipRegion procedure TForm1.Button1Click(Sender: TObject);var img : HI ...