js实现鼠标悬浮元素出现/隐藏效果

参考慕课网视频：https://www.imooc.com/video/2879

实现效果比较简单，实现方法也不难，但有些细节需要注意。

最终效果如图：

鼠标移到“分享”上方时，粉红色div缓慢出现：

鼠标移开时，自动缓慢隐藏

实现思路：

首先是给div定义一个left，且值为负数，使之隐藏。通过js鼠标事件，使用定时器，改变left的值。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>js鼠标悬浮缓慢出现动画</title><style type="text/css">*{margin: 0;}#div1{width: 200px;height: 200px;background: lightpink;position: relative;left: -200px;top: 0px;}#share{width: 50px;height: 50px;line-height: 50px;text-align: center;color: aliceblue;background: darkgray;position: absolute;left: 200px;top: 75px;}</style>
</head>
<body><div id="div1"><span id="share">分享</span></div>
</body>
<script>window.onload = function () {var div1 = document.getElementById('div1');div1.onmouseover = function () {startMove(0);}div1.onmouseout = function () {startMove(-200);}}var timer = null;function startMove(iTarget) {//clearInterval清除定时器，因为鼠标每对元素操作一次就会触发一次startMove函数，开启一个定时器，如果不清除，可能存在同时启动多个定时器的情况，使得元素移动速度变快。clearInterval(timer);var div1 = document.getElementById('div1');timer = setInterval(function () {var speed = 1;if (div1.offsetLeft > iTarget) {speed = -1;}if (div1.offsetLeft == iTarget) {clearInterval(tiemr);}div1.style.left = div1.offsetLeft + speed * 10 +'px';},30)}</script>
</html>

js实现鼠标悬浮元素出现/隐藏效果相关推荐

** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图代码: <div id="classifyScroll" :class= ...
JS实现鼠标点击展开/隐藏表格行
<title>JS实现鼠标点击展开/隐藏表格行_网页代码站(www.webdm.cn)</title> <script language="javascript ...
原生JS实现鼠标按下拖拽效果
原生JS实现鼠标按下拖拽效果 <!DOCTYPE html> <html lang="en"><head><meta charset=&q ...
html实现鼠标拖拽按钮,JS实现鼠标按下拖拽效果
原生js实现鼠标按下拖拽效果,供大家参考,具体内容如下鼠标拖动 body { margin: 0; } div { width: 200px; height: 200px; position: ab ...
js实现鼠标悬浮图片放大预览
先上效果图: 鼠标悬浮直接大图浮现! 首先css代码: .big {overflow: hidden;display: none;position: absolute;top: 100px;left: ...
html点击鼠标页面出现爱心,js实现鼠标点击飘爱心效果
本文实例为大家分享了js实现鼠标点击飘爱心的具体代码,供大家参考,具体内容如下鼠标点击特效 html { cursor: pointer; } h3 { text-align: center; us ...
原生JS实现鼠标悬浮菜单栏
今天在工作中需要用原生JS实现一个鼠标悬浮菜单栏,记录一下. 效果图代码实现 index.html <!DOCTYPE html> <html lang="en" ...
web前端入门到实战：CSS鼠标悬浮图片模糊切换效果
分享一段代码实例,它实现了图片的模糊效果. 默认状态下,图片是模糊的,当鼠标悬浮那么图片会恢复正常状态. 代码实例如下: <!doctype html> <html> < ...
html中鼠标悬浮显示与隐藏,css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示. 如下图当鼠标移到图片上时,相关的描述从下方显示出来. css实现原理与情景: A 是 B 的父元素 B 默认隐藏 B{opa ...

js实现鼠标悬浮元素出现/隐藏效果

js实现鼠标悬浮元素出现/隐藏效果相关推荐

最新文章

热门文章