JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop
2017-04-08 11:21
761 查看
动态弹出浮动窗口显示图片的效果是这样子的:
不多说,直接上代码:
这段代码很简单,基本谁都看得懂。不过其中有两个概念很容易被混淆,一个是 clientX 和 clientY,另一个是 scrollLeft 和 scrollTop。这两个属性经常使用,通过这两个属性,一个网页中的所有坐标尽在掌握之中。
(1)clientX 和 clientY 需配合 event 使用,用于触发鼠标事件时,获取鼠标在网页中的横和纵坐标。用W3C的解释是,clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标;clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标。
(2)scrollLeft 和 scrollTop 常常配合 body 来使用,其中 scrollLeft是网页被卷去的左,scrollTop
是网页被卷去的高。问题来了,什么是“被卷去”?其可以理解为你看一个内容丰富的网页时,用鼠标往下滚轮滚动后,网页会有一部分被卷走了,然后出现往下新的部分。根据这一特性,通过 clientX + scrollLeft 就可以获取到当前鼠标基于整个网页的横坐标,通过
clientY + scrollTop 就可以获取到当前鼠标基于整个网页的纵坐标。
这段代码的核心是,设置要弹出的图片DIV为绝对定位,然后在js中动态修改样式中的 left 和 top 属性来控制DIV在网页中的显示位置。
不多说,直接上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js弹出窗</title> <style> a{ float: left; margin-left:30px; margin-top: 50px; } img{ width:400px; border:black 1px solid; } #image{ position: absolute; display: none; } </style> <script> //显示图片 function displayImg() { var img = document.getElementById("image"); var x = event.clientX + document.body.scrollLeft + 20; var y = event.clientY + document.body.scrollTop - 5; img.style.left = x + "px"; img.style.top = y + "px"; img.style.display = "block"; } //图片消失 function vanishImg(){ var img = document.getElementById("image"); img.style.display = "none"; } </script> </head> <body> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 鼠标移至这里显示图片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 鼠标移至这里显示图片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 鼠标移至这里显示图片 </a> <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" > 鼠标移至这里显示图片 </a> <!--动态显示的图片--> <div id="image"> <img src="XXXX.png" alt=""><!--如果加上AJAX就可以根据不同的超链接来显示不同的图片了--> </div> </body> </html>
这段代码很简单,基本谁都看得懂。不过其中有两个概念很容易被混淆,一个是 clientX 和 clientY,另一个是 scrollLeft 和 scrollTop。这两个属性经常使用,通过这两个属性,一个网页中的所有坐标尽在掌握之中。
(1)clientX 和 clientY 需配合 event 使用,用于触发鼠标事件时,获取鼠标在网页中的横和纵坐标。用W3C的解释是,clientX 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标;clientY 事件属性返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的垂直坐标。
(2)scrollLeft 和 scrollTop 常常配合 body 来使用,其中 scrollLeft是网页被卷去的左,scrollTop
是网页被卷去的高。问题来了,什么是“被卷去”?其可以理解为你看一个内容丰富的网页时,用鼠标往下滚轮滚动后,网页会有一部分被卷走了,然后出现往下新的部分。根据这一特性,通过 clientX + scrollLeft 就可以获取到当前鼠标基于整个网页的横坐标,通过
clientY + scrollTop 就可以获取到当前鼠标基于整个网页的纵坐标。
这段代码的核心是,设置要弹出的图片DIV为绝对定位,然后在js中动态修改样式中的 left 和 top 属性来控制DIV在网页中的显示位置。
相关文章推荐
- JavaScript实现图片轮播和鼠标悬停显示
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
- ArcGIS api for javascript——鼠标悬停时显示信息窗口
- js-javascript-鼠标悬停弹出大图窗口的源代码
- 动态显示图片,并为hyperlink 做鼠标悬停效果
- jquery 鼠标移到图片弹出浮动层显示大图片
- javascript 弹出浮动层,并锁定当前窗口一
- js鼠标移动到图片上浮动层显示图片
- javascript动态改变img的src属性图片不显示的解决方法
- javascript 弹出窗口中是否显示地址栏的实现代码
- 解决javascript动态改变img的src属性图片不显示问题
- 快速实现鼠标移上的浮动层显示 (Javascript)
- 如何在html页面上随着鼠标的位置显示浮动层图片或别的东东?(附代码)
- 在Javascript 中实现window.open弹出窗口居中显示
- 【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
- [javascript]鼠标滑过列表文字显示图片及详细信息
- imagebutton的鼠标悬停事件:鼠标指向时显示图片1,鼠标离开时显示图片2
- 鼠标移动到图片显示大图的javascript代码
- 鼠标悬停文字上显示图片
- 在WinCE下绘制半透的效果要注意的问题+WINCE 下创建动态显示图片窗口