Web前端 / 基础
8 分钟 读完 (大约 1167 个字)

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节点。

# Demo, JS, Web前端, 基础, 案例

喜欢这篇文章？打赏一下作者吧

Web前端基础（11）offset家族
使用VS Code做Web开发

评论

关注我

链接

广告位招租

最新文章

分类

标签云

Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK COM1 COM2 CSS Camera Raw， 直方图 Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Error Exception Extensions File FileProvider Flow Fresco GCC Git GitHub GitLab Gradle Groovy HTML5 Handler HandlerThread Hexo Hybrid I/O IDEA IO ImageMagick IntelliJ Intellij Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO NexT Next Nodejs ObjectAnimator Oracle VM Permission PhotoShop Physics Python RGB RS-232 RTU Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SSH Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue.js Web Web前端 Workbench api apk bookmark by关键字 cli compileOnly component computed css c语言 databases demo hexo hotfix html iOS icarus implementation init jQuery javascript launchModel logo merge methods mvp offset photos pug query rxjava2 scss servlet shell svg tkinter tomcat transition unicode utf-8 vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 事件 享元模式 仓库 代理模式 位运算 依赖注入 修改，tables 光和色 内存 内核 内部分享 函数 函数式编程 分支 分析 创建 删除 动画 单例模式 压缩图片 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工具 工厂模式 年终总结 开发技巧 异常 弱引用 恒星 打包 技巧 指令 指针 插件 插值 摄影 操作系统 攻略 故事 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 渲染 源码 源码分析 瀑布流 热修复 版本 版本控制 状态栏 状态模式 生活 留言板 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统，发行版， GNU 索引 组件 组合模式 绑定 结构 结构体 编码 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 脚手架 膨胀的宇宙 自定义 自定义View 自定义插件 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 转换 软件工程 软引用 运算符 迭代子模式 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 黑洞

归档

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×