Web前端基础（10）JS实践案例--鼠标跟随

发表于 | 更新于 | 分类于 ，

演示和源码

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;

文本居中样式是设置给文本外的父容器的，设置文本行高和容器高度一致可以使文本垂直居中。

光标样式

1
cursor: pointer;

设置光标样式

值 描述
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节点。