JavaScript-事件进阶案例
Posted 我真的爱敲代码
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript-事件进阶案例相关的知识，希望对你有一定的参考价值。
本节案例的具体内容：JavaScript-事件进阶
【案例】图片跟随鼠标移动
分析：
- 鼠标不断的移动，使用鼠标移动事件： mousemove
- 在页面中移动，给document注册事件
- 图片要移动距离，而且不占位置，使用绝对定位即可
- 核心原理： 每次鼠标移动，都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的top和left 值就可以移动图片
var pic = document.querySelector('img');
document.addEventListener('mousemove', function(e) {
var x = e.pageX;
var y = e.pageY;
pic.style.top = y + 'px'; //想要鼠标放在图片的正中间就加减图片宽度/高度的一半
pic.style.left = x + 'px';
})
【案例】光标定位到搜索框
需求：当按下s键，光标就定位到搜索框
分析：
- 核心思路： 检测用户是否按下了s 键，如果按下s 键，就把光标定位到搜索框里面
- 使用键盘事件对象里面的keyCode 判断用户按下的是否是s键
- 搜索框获得焦点： 使用 js 里面的 focus() 方法
var text = document.querySelector('input')
document.addEventListener('keyup',function(e) {
if (e.keyCode === 83) { //s键的ASCII码是83
text.focus()
}
})
【案例】输入内容放大镜
需求：当文本框中输入内容时，文本框上面自动显示大字号的内容。
分析：
- 快递单号输入内容时， 上面的大号字体盒子（con）显示(这里面的文字
- 同时把快递单号里面的值（value）获取过来赋值给 con盒子（innerText）做为内容
- 如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
- 注意：keydown和keypress在文本框中的特点：他们两个事件触发的时候，文字还没有落入文本框中
- keyup事件触发的时候，文字就已经落入文本框里面
- 失去焦点时，就隐藏这个con盒子了
- 获得焦点时，并且文本框内容不为空，就显示这个con盒子
<body>
<style>
* {
margin: 0;
padding: 0;
}
.search {
position: relative;
width: 178px;
margin: 100px;
}
.con {
display: none;
position: absolute;
top: -40px;
width: 171px;
border: 1px solid rgba(0, 0, 0, .2);
box-shadow: 0 2px 4px rgba(0, 0, 0, .2);
/*阴影*/
padding: 5px 0;
font-size: 18px;
line-height: 20px;
color: #333;
}
.con::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 28px;
left: 18px;
border: 8px solid #000;
border-style: solid dashed dashed;
border-color: #fff transparent transparent;
}
</style>
<div class="search">
<div class="con">123</div>
<input type="text" placeholder="请输入你的电话号码" class="jd">
</div>
<script>
var con = document.querySelector('.con')
var jd_input = document.querySelector('.jd')
jd_input.addEventListener('keyup', function () {
if (this.value == '') {
con.style.display = ''
} else {
con.style.display = 'block'
con.innerhtml = this.value
}
})
// 失去焦点，隐藏盒子
jd_input.addEventListener('blur', function () {
con.style.display = 'none'
})
// 获得焦点，显示盒子
jd_input.addEventListener('focus', function () {
if (this.value !== '') {
con.style.display = 'block'
}
})
</script>
</body>
以上是关于JavaScript-事件进阶案例的主要内容，如果未能解决你的问题，请参考以下文章