在鼠标位置显示一个div（带滚动条）

最新推荐文章于 2021-05-30 23:36:29 发布
原创 最新推荐文章于 2021-05-30 23:36:29 发布 · 700 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#IE

本文介绍了一种在网页中根据鼠标点击位置显示DIV的方法，并解决了因页面滚动导致显示位置偏移的问题。通过调整JavaScript代码，使得在不同浏览器下都能正确显示。
用鼠标点击页面上一个指定位置的时候，在鼠标位置显示一个DIV。
但是将页面往滚动一下，显示的位置就不同了，这应该怎么解决呢？


function moveLayers(l_id)
{
var my_layer=document.getElementById(l_id);
var x=window.event.clientX;
var y=window.event.clientY;
//下面的值要改为：（虚线中的值）
my_layer.style.posLeft=x;
my_layer.style.posTop=y;
}

--------------------------------------------------------------------
在 ie 下用

document.documentElement.scrollTop + window.event.clientY

在 ff 下

window.scrollY + event.clientY
----------------------------------------------------------------------
html中设置让div中的内容超出后自动显示滚动条
09-28
在HTML中，我们经常遇到需要限制某个容器（如div）大小，但又希望其内容能完全显示，这时就需要使用滚动条。本文将详细介绍如何在HTML中设置div，使其内容超出后自动显示滚动条。 首先，我们需要创建一个div元素，...
js判断鼠标位置是否在某个div中的方法
10-22
在JavaScript编程中，判断鼠标位置是否在某个div元素内是一个常见的需求，尤其在制作交互式网页时非常有用。本文将详细介绍如何通过JavaScript实现这一功能，这涉及到鼠标事件的响应处理以及页面元素的位置属性操作...
鼠标的光标上面有一个滚动条图标_鼠标中键有时候比左键还好用！学会这些，工作效率至少提高3倍...
weixin_39634022的博客
12-05 1330
我们的鼠标有几个键？两个键！还有一个滚轮！其实！中间的那个滚轮是可以按下去的！很多人都忽略了鼠标中键，其实这是一个提高效率神器啊！1、在网页浏览器上的用处(1)在某个链接上按中键，可以新标签页打开这个链接，这样就避免了一点开链接就被迫离开当前网页的尴尬了。(2)在浏览器上方的标签栏里，对着某个标签页点中键，可以直接关闭这个标签页。(3)在网页里单击鼠标中键，会出现一个移动方向的光标，只要移动鼠标到...
鼠标位置的显示以及滚动条
xfortius的专栏
03-23 2173
在进行图像操作的时候，比如点击鼠标、移动鼠标等等都是针对的是视图坐标。即OnLButtonDown(UINT nFlags, CPoint point)或者OnMouseMove(UINT nFlags, CPoint point)中的point是用的视图坐标。但是在操作文档时，必须知道的是文档坐标，在有滚动条的情况下，文档坐标等于视图坐标加上滚动条位置。 也就是说在进行图像操作的时候用视图坐标
滚动（动态获取鼠标位置）
qq_42275455的博客
09-08 914
图片滚动效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{
在鼠标点击的位置 ，添加一个div ,类似手表右键菜单
weixin_33831196的博客
11-04 402
为什么80%的码农都做不了架构师？>>> ...
html抓取鼠标点击位置,怎么获取鼠标的点击位置，并在该位置弹出一个div
weixin_29314405的博客
05-30 1044
偷了个懒，直接用了jQuery来写了，主要就是利用点击事件拿到鼠标位置，如下代码：Document* {margin: 0;padding: 0;list-style: none;}.msg {display: block;margin: 10px auto 0;padding: 10px;width: 700px;height: 300px;color: #333;border: 1px sol...
js实现鼠标滑动到某个div禁止滚动
10-14
关于如何使用JavaScript实现当鼠标滑动到指定的div区域内时禁止页面滚动的功能，这是一个在前端开发中可能会遇到的实际需求。通常这种需求是在特定的操作场景中为了提供更好的用户体验而提出的。例如，在一个产品...
div浮层,滚动条移动,位置保持不变的4种方法汇总
09-04
在网页设计中，有时我们需要创建一个浮动层（div浮层），即使页面滚动，该层的位置仍然保持不变。这种效果在很多情况下都非常有用，比如固定头部导航、侧边栏广告等。这里将介绍4种实现div浮层在滚动条移动时保持...
js 随鼠标滚动条滚动的div
03-17
在JavaScript中，实现一个div元素随鼠标滚动条滚动的效果，主要涉及到两个关键概念：事件监听和CSS定位。这个效果常用于创建固定定位的侧边栏、头部导航等元素，即使页面滚动，它们仍然保持在视口中的特定位置。 ...
根据鼠标位置显示div
u010034351的专栏
09-03 4891
根据鼠标位置显示div   2010-12-06 21:09:41|  分类： 前台 |字号 订阅            New Document           //在鼠标显示一个层，该层的内空为div2的内容     function showTip(){     var div3 = document.getElementById('div3')
CSS3 动画-- 鼠标移上去，div 会旋转、放大、移动
weixin_33836874的博客
05-30 201
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width:120px;...
鼠标指针下总出现一个滚动条似的方框，怎么办？有图
热门推荐
weixin_33717117的博客
08-24 3万+
鼠标指针下总出现一个滚动条似的方框，怎么办？有图 本人的解决办法： 控制面板 -》硬件声音-》鼠标-》指针-》去掉最下面允许主题更改指针（L）的复选框-》点击确定。   ps:也可以从桌面-》右键-》个性化-》更改鼠标指针-》指针 进去设置 ------------------------------  本人微信公众帐号： 心禅道（xinchandao）   本...
【前端效果】滚动条悬浮
weixin_30417487的博客
02-10 1104
<!DOCTYPE html> <html> <meta charset="utf-8"> <head> <title></title> <style type="text/css"> .title{width: 70%;background-color...
js生成div并在指定位置显示出来
weixin_43545329的博客
12-05 5719
点击客户名称输入内容 ，触发post请求向后台请求数据（模糊查询）。然后将请求后的数据 生成一个div 在该输入框下方显示出来。下面是具体实现方法； js： 创建请求 //创建请求 function createXMLHttpRequest() { xmlHttp = false; if (window.XMLHttpRequest) { //for Mozilla...
使用鼠标拖拽div，实现横向滚动
ROVAST的专栏
04-09 1万+
效果 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="https://cdn.bootcss.co
鼠标控制图片放大缩小div带滚动条效果
06-12
可以通过以下步骤实现鼠标控制图片放大缩小div带滚动条效果： 1. 在HTML文件中创建一个div元素，并设置其样式为具有固定高度和宽度且具有滚动条的容器。 ``` <div id="container" style="width: 500px; height: 500px; overflow: auto;"> <img id="image" src="path/to/image.jpg" alt="image" style="width: 100%; height: auto;"> </div> ``` 2. 在JavaScript文件中获取容器和图像元素，并设置图像元素的初始缩放级别。 ``` const container = document.getElementById('container'); const image = document.getElementById('image'); let scale = 1; ``` 3. 监听鼠标滚轮事件，并根据滚轮滚动方向调整图像的缩放级别和滚动条位置。 ``` container.addEventListener('wheel', (event) => { event.preventDefault(); const delta = Math.sign(event.deltaY); scale += delta * 0.1; if (scale < 1) scale = 1; if (scale > 3) scale = 3; image.style.transform = `scale(${scale})`; const containerWidth = container.clientWidth; const containerHeight = container.clientHeight; const imageWidth = image.width * scale; const imageHeight = image.height * scale; container.scrollLeft = (imageWidth - containerWidth) / 2; container.scrollTop = (imageHeight - containerHeight) / 2; }); ``` 这样就可以通过鼠标滚轮控制图片的放大和缩小，并且在容器中显示滚动条以便用户查看整个图片。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值