https://github.com/vortesnail/hover-seconds-do
:boat: Perform an action after an element has hovered for a few seconds
https://github.com/vortesnail/hover-seconds-do
Last synced: about 1 month ago
JSON representation
:boat: Perform an action after an element has hovered for a few seconds
- Host: GitHub
- URL: https://github.com/vortesnail/hover-seconds-do
- Owner: vortesnail
- License: mit
- Created: 2019-10-30T15:58:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2019-11-04T09:35:48.000Z (over 5 years ago)
- Last Synced: 2025-02-27T00:19:02.651Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README-zh-Hans.md
- License: LICENSE
Awesome Lists containing this project
README
# hover-seconds-do [](https://travis-ci.org/vortesnail/hover-seconds-do)
## 介绍
在某些场景，我们希望鼠标移到某个元素上，悬停几秒后能执行一些操作，但是鼠标稍微移动一下，时间重置，状态回退如初。在鼠标离开当前绑定的元素时，我们的页面回退如初。这个工具函数一定能帮到你。
## 例子
播放器一个很重要的功能: **鼠标悬停在视频播放界面时，在一定时间后鼠标会消失，视频下方的控制栏也会隐藏，呈现视频的最大可视化。但是鼠标稍微一动，一切恢复如初**。用一张简单的 gif 图来说明的话，是下面这样子的：
## 快速使用
### 安装
```bash
npm install --save hover-seconds-do
```
### 使用
- element: 你所希望操作的元素（比如上面 gif 中 “我是视频”这个 div 元素）
- secondsLaterDoFn: 你设定的时间之后，想做什么操作（比如上面 gif 中“鼠标消失，控制栏消失”）
- seconds: 你希望的时间，单位: ms（比如上面 gif 中我设定的时间为 2000ms）
- reNormalFn: 回归原样的操作（比如上面 gif 中控制栏和鼠标都回来）
**注: html 引用需要下载 `dist/index_bundle.js` 手动引入，在 React 中要手动 `import 'hover-seconds-do';` **
```js
const hoversd = new window.HoverSD(element, secondsLaterDoFn, seconds, reNormalFn);
hoversd.secondsHoverEX();
// ...
// other code here
// ...
hoversd.removeElemEventListener();
```
## 项目运行
在终端一步一步执行：
```bash
git clone [email protected]:vortesnail/hover-seconds-do.git
```
进入 clone 下来的文件
```bash
npm install -g http-server
npm run example
```
浏览器窗口打开 `http://localhost:8880/example/index.html` 即可查看样例
## 示例代码
我们拿上面的 gif 做例子：
**index.html**
```html
example
我是视频
我是视频控制栏
```
**index.css**
```css
.box {
width: 400px;
height: 200px;
background-color: lightskyblue;
text-align: center;
line-height: 200px;
color: #fff;
position: relative;
/* cursor: none; */
}
.box .test-box {
position: absolute;
width: 100%;
height: 30px;
left: 0;
bottom: 0;
background-color:lightgray;
text-align: center;
line-height: 30px;
}
```
**index.js**
```js
let box = document.querySelector('.box');
function hiddenTestBox() {
let textBox = document.querySelector('.test-box');
textBox.style.display = 'none';
box.style.cursor = 'none';
}
function showTestBox() {
let textBox = document.querySelector('.test-box');
textBox.style.display = 'block';
box.style.cursor = 'default';
}
let hoversd = new window.HoverSD(box, hiddenTestBox, 2000, showTestBox);
hoversd.secondsHoverEX();
// hoversd.removeElemEventListener();
```
## LICENSE
MIT