Web前端基础(10)JS实践案例--鼠标跟随
·
大约 500 个字
·
预计 3
分钟 读完
演示和源码
html布局
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div class="nav" id="nav">
<span class="cloud" id="cloud"></span>
<ul>
<li>首页新闻</li>
<li>师资力量</li>
<li>活动策划</li>
<li>企业文化</li>
<li>招聘信息</li>
<li>公司简介</li>
<li>上海校区</li>
<li>广州校区</li>
</ul>
</div>
|
css布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| *{margin: 0; padding: 0;}
ul {list-style:none;}
body {
background-color: #000;
}
.nav {
width: 800px;
height: 42px;
background:url("images/rss.png") no-repeat right center #fff;
margin: 100px auto;
border-radius: 5px;
position: relative;
}
.nav ul {
position: absolute;
top: 0;
left: 0;
}
.nav li {
float: left;
width: 83px;
height: 42px;
line-height: 42px;
text-align: center;
color: #000;
cursor: pointer;
}
.cloud {
width: 83px;
height: 42px;
position: absolute;
top: 0;
left: 0;
background: #ff0000;
border-radius: 5px;
}
|
演示效果:
javascript代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| var cloud = document.getElementById("cloud"); // 云彩
var nav = document.getElementById("nav");
var lis = nav.children[1].children;
var current = 0; // 用于存放点击时候的 offsetLeft
//alert(lis.length);
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
// alert(this.offsetLeft);
target = this.offsetLeft; // 把左侧的位置 ,给 target
}
lis[i].onmouseout = function () {
target = current; // 鼠标离开 target 是 刚才我们点击的位置
}
lis[i].onclick = function () {
current = this.offsetLeft; // 点击的时候把当前位置存储一下
}
}
// 缓动公式
var leader = 0, target = 0;
setInterval(function () {
leader = leader + (target - leader) / 10;
cloud.style.left = leader + "px";
}, 10);
|
知识点
背景设置
1
| background:url("images/rss.png") no-repeat right center #fff;
|
no-repeat : 不重复平铺背景图片
right cener: 选择显示图片的位置(图中红色框是浏览器可见区域)
在设置背景图的时候一定记得设置默认背景色。
文本居中
1
2
| line-height: 42px;
text-align: center;
|
文本居中样式是设置给文本外的父容器的,设置文本行高和容器高度一致可以使文本垂直居中。
光标样式
设置光标样式
值 | 描述 |
---|
url | 需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。 |
default | 默认光标(通常是一个箭头) |
auto | 默认。浏览器设置的光标。 |
crosshair | 光标呈现为十字线。 |
pointer | 光标呈现为指示链接的指针(一只手) |
move | 此光标指示某对象可被移动。 |
e-resize | 此光标指示矩形框的边缘可被向右(东)移动。 |
ne-resize | 此光标指示矩形框的边缘可被向上及向右移动(北/东)。 |
text | 此光标指示文本。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
help | 此光标指示可用的帮助(通常是一个问号或一个气球)。 |
遍历子元素
1
2
3
4
| var lis = nav.children[1].children;
for (var i = 0; i < lis.length; i++) {
}
|
children和childNodes的区别:childNodes是标准属性,children是非标准属性,都是返回制定元素的子元素集合,children只返回htm节点,不返回文本节点,children得到了所有浏览器支持。
onmouseout
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。
1
2
3
4
5
6
7
8
9
10
11
12
13
| <div onmouseover="mOver(this)" onmouseout="mOut(this)">把鼠标移到上面</div>
<script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}
function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script>
|
类似的事件句柄还有很多
属性 | 此事件发生在何时… |
---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondbclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
offset家族
offset家族:javascript中有一套方便的获取元素尺寸的办法就是offset家族。

我们在本案例中用到了div.offsetLeft属性,是指离父容器内左边框的距离。
this关键字
1
2
3
| lis[i].onclick = function () {
current = this.offsetLeft; // 点击的时候把当前位置存储一下
}
|
在方法内部this指的是调用该方法的节点本身,这里指的是第i个lis节点。