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

· 大约 500 个字 · 预计 3 分钟 读完
Web前端 · 基础
Web前端 · 基础 · Demo · 案例 · 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节点。