JS实现鼠标滑入出现弹窗功能

案例：分享到菜单功能

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#div1{width: 100px;height: 200px;background-color: gray;position: absolute;left: -100px;top: 200px;border: 1px solid black;}#div1 span{width: 20px;height: 60px;background-color: orange;position: absolute;left: 100px;top: 70px;border: 1px solid black;line-height: 20px;}</style><script>/* 鼠标移入-100 => 0鼠标移出0 =>-100*/window.onload = function(){var oDiv = document.getElementById("div1");oDiv.onmouseover = function(){StartMove(0);}oDiv.onmouseout = function(){StartMove(-100);}}var timer = null;function StartMove(iTarget){var oDiv = document.getElementById("div1");var speed = 50;if(oDiv.offsetLeft > iTarget){speed = -Math.abs(speed);}else{speed = Math.abs(speed);}clearInterval(timer);timer = setInterval(function(){if(oDiv.offsetLeft == iTarget){clearInterval(timer);}else{oDiv.style.left = oDiv.offsetLeft + speed + 'px';}},30);  }</script></head><body><di id = 'div1'><span>分享到</span></di></body>
</html>

效果：

相关回顾：JS实现物体运动

JS实现鼠标滑入出现弹窗功能相关推荐

【HTML】div、p等标签里的文字内容太长，让其显示省略，鼠标滑入再悬浮完整内容。
前言本篇文章将学习的是隐藏文字,让文字显示-省略号,且鼠标滑入再悬浮显示完整内容. 话不多说,直接看效果和讲解吧! 效果展示实践过程(代码讲解) 代码比较简单,也有比较详细的注释:如果其他友友不懂 ...
html鼠标移动自动展开,JS实现鼠标滑过折叠与展开菜单效果代码
本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效 ...
html5鼠标滑过边框内外发亮,JS实现鼠标滑过显示边框的菜单效果
本文实例讲述了JS实现鼠标滑过显示边框的菜单效果.分享给大家供大家参考,具体如下: JS鼠标滑过显示边框菜单 .menulines{ border:1px solid white; } .menuli ...
html 复选框拖拽多选,js实现鼠标拖拽多选功能
最近做了一个用js实现鼠标拖拽多选的功能,于是整理了一下思路,写了一个小demo: 遮罩出现: 被遮罩盖住的,即为选中的块(背景色为粉色) 下面是具体代码,注释已在文中,与大家交流. 鼠标拖拽多选功能 ...
java鼠标滑入换图片_超简单---鼠标滑过变换图片
鼠标滑过,图片变换,非常实用,用JS可以很容易做到,但是JS完成后有个缺陷,在滑过的时候,第一次可能是空白的,然后才显示,因为要下载图片,网速慢的时候更加明显.其实用CSS实现更容易,而且不会出现上面 ...
html鼠标滑入滑出效果,CSS3创建一个滑出滑入的动画
有时候我们需要在网站上的边栏上放一个客户帮助的表单,开始是放一个按钮在那里,点击之后滑出内容来,一般这种效果我们会用js来控制.现在CSS3也可以做到了哦. 不知道什么意思吗?看看这个演示这个是怎么 ...
高德地图js API实现多点标记marker，多点marker移除和鼠标滑入标点显示提示框
官方API:https://lbs.amap.com/api/javascript-api/guide/abc/prepare 先说下需求吧,我就不往外一段一段的摘了: 分全部和三家运营商,按钮点击, ...
Vue超出文本框显示省略号，鼠标滑入显示全部
在开发过程中经常会遇到空间太小文字展示不全的问题,对于一些数据可能影响不大,但对于一些数据描述开头都是一样结尾不同的可能就没办法区分了.解决办法:通过鼠标划入展示全部文字的效果用来解决. 一.通过 : ...
JS实现鼠标滑过图片的抖动效果
在上网时候发现了这个效果(效果演示地址:http://www.baidu.com/search/baike/usertask/mingmantianxia/). 在鼠标放到图片上, 图片会有个上下抖动 ...

JS实现鼠标滑入出现弹窗功能

JS实现鼠标滑入出现弹窗功能

JS实现鼠标滑入出现弹窗功能相关推荐

最新文章

热门文章