JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop
来源:互联网 发布:浙江省政府数据平台 编辑:程序博客网 时间:2024/06/14 08:32
动态弹出浮动窗口显示图片的效果是这样子的:
不多说,直接上代码:
<!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在网页中的显示位置。
1 0
- JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop
- scrollHeight,scrollLeft,scrollTop,scrollWidth,offsetHeight,offsetLeft,offsetTop,event.clientX,event.clientY
- js-javascript-鼠标悬停弹出大图窗口的源代码
- 鼠标悬停显示图片
- 获取鼠标坐标 clientX clientY 事件属性
- event.clientX event.clientY 鼠标移动位置
- 动态显示图片,并为hyperlink 做鼠标悬停效果
- JavaScript实现图片轮播和鼠标悬停显示
- Js中实现图片随鼠标移动——ClientX,ClientY,Position
- jquery 鼠标移到图片弹出浮动层显示大图片
- 通过js的event的clientX,clientY来动态显示光标坐标
- javascript 弹出浮动窗口二
- jQuery鼠标悬停显示提示信息窗口
- jQuery鼠标悬停显示提示信息窗口
- HTML 图片鼠标悬停动态效果
- 鼠标悬停文字上显示图片
- css实现鼠标悬停图片放大显示
- 鼠标悬停文字上显示图片
- 黑龙江大学校内图书馆自动预约抢座脚本~~
- 枚举加二分找最优解Kindergarten Election
- PCA主成分分析Python实现
- django.core.exceptions.ImproperlyConfigured: No DjangoTemplates backend is configured.
- 问题 Y: 字母图形
- JavaScript | 鼠标悬停动态弹出浮动窗口显示图片 | clientX, clientY, scrollLeft, scrollTop
- Mac电脑使用:Mac电脑如何用自带的Safari浏览器,一键翻译英文网页为中文网页
- 第94篇ES之图像识别OCR及识别的文字ES检索
- canvas中的缩放示例
- Ubuntu下PHP+MySQL+Apache+PHPStorm的安装和配置
- React Native之基础篇Image
- Storm的启动命令
- 用PHP实现一个关于德州扑克算法的程序(一):发牌
- 二叉树的最大结点