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 ...
随机推荐
- IntelliJ IDEA 的 Java 热部署插件 JRebel 安装及使用
JRebel 介绍 JRebel for Intellij JRebel 在 Java Web 开发中, 一般更新了 Java 文件后要手动重启 Tomcat 服务器, 才能生效, 自从有了 JRe ...
- Linux 内核版本规律
版本组成:主版本号.次版本号.修正版本号 主版本号和次版本号一起标志着重要的功能变更,修正版本号表示较小的功能变更.次版本号表示该版本是否为稳定版本,偶数则为稳定版本,奇数则可能存在一些BUG.
- python实现跳板机
公司有1000多台服务器,线上机器都是禁止root登录的,所以平时是用普通用户登录,然后在su到root,密码都是在excel表中存的,这样登录一台机器,输两次命令,搜两次密码,实在很麻烦,有一天备份 ...
- Lintcode: Rotate String
Given a string and an offset, rotate string by offset. (rotate from left to right) Example Given &qu ...
- 最长上升子序列(N*log(N))hdu1025
(HDU1025) Constructing Roads In JGShining's Kingdom Time Limit: 2000/1000 MS (Java/Others) Memory ...
- 树形DP(简单题)(Y HDU4705)
题意:给出一个n个节点的树形图,统计{A,B,C}的数量,其中ABC分别是树上三个不同的节点,并且这三个节点不能被一条路径覆盖 分析:对于下图 进行dfs深搜统计,num[u]统计回溯到当前节点u,并 ...
- vi/vim 键盘图 & 替换
在VIM中进行文本替换: 1. 替换当前行中的内容: :s/from/to/ (s即substitude) :s/from/to/ : 将当前行中的第一个f ...
- Java基础(55):Exception类详解(转)
Java中的异常 Exception java.lang.Exception类是Java中所有异常的直接或间接父类.即Exception类是所有异常的根类. 比如程序: public class Ex ...
- yii遍历行下的每列数据(小1月考)
效果图: 控制器(1种): //显示列表 public function actionList() { //实例化对象 $model= new Qiu(); ...
- Linux centOS7 下安装mysql5.7.10
1:下载二进制安装包 http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.10-linux-glibc2.5-x86_64.tar.gz 2:解压到 ...