jjzjj

javascript - 放大图像并用鼠标指针移动它

coder 2023-08-08 原文

抱歉，如果这个问题对我来说似乎微不足道，但是..

我有一些图片，当我将鼠标悬停在它们上面时我需要放大它们。但是.. 当我在图像上移动它时，我希望放大的图像贴在指针旁边。我不知道该怎么调用它。我很确定它只能用 javascript 完成，只是 css 在这里不起作用。

像这样的东西 http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ ，但你知道，它必须随着指针的移动而移动。

最有效的方法是什么？

最佳答案

以前的答案可能正是您要找的，您可能已经解决了这个问题。但我注意到您没有在帖子中的任何地方提到 jquery，所有这些答案都涉及到这一点。所以对于纯 JS 解决方案...

我会从问题的措辞方式假设您已经知道如何弹出图像？这可以通过在 html 中编码绝对定位的隐藏 img 标签或使用 JS 即时生成来完成。如果您是 JS 新手，前者可能更容易。在我的示例中，我假设您执行了类似于以下内容的操作:

<img src="" id="bigImg" style="position:absolute; display:none; visibility:hidden;">

然后您需要为缩略图设置一个 onMouseOver 函数。这个函数必须做三件事:

1) 将实际图像文件加载到隐藏图像中

//I'll leave it up to you to get the right image in there.
document.getElementById('bigImg').src = xxxxxxxx;

2) 定位隐藏图片

//See below for what to put in place of the xxxx's here.
document.getElementById('bigImg').style.top = xxxxxxxx;
document.getElementById('bigImg').style.left = xxxxxxxx;

3) 使隐藏的图像出现

document.getElementById('bigImg').style.display = 'block';
document.getElementById('bigImg').style.visibility = 'visible';

然后您需要捕获 onMouseMove 事件，并使用您在上面 (2) 中用于定位图像的相同代码相应地更新现在取消隐藏的图像的位置。这将类似于以下内容:

//Get the mouse position on IE and standards compliant browsers.
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
    var curCursorX = e.pageX;
    var curCursorY = e.pageY;
} else {
    var curCursorX = e.clientX + document.body.scrollLeft;
    var curCursorY = e.clientY + document.body.scrollTop;
}
document.getElementById('bigImg').style.top = curCursorY + 1;
document.getElementById('bigImg').style.left = curCursorX + 1;

这应该就可以了。只需添加一个 onMouseOut 事件即可再次隐藏 bigImg 图像。您可以将最后两行中的“+1”更改为您喜欢的任何内容，以便相对于光标正确放置图像。

请注意，以上所有代码仅用于演示目的；我还没有测试过任何一个，但它应该能让你走上正确的轨道。您可能希望通过预加载更大的图像来进一步扩展这个想法。您也可以通过使用 setTimeout 每 20 毫秒左右更新一次位置来放弃捕获 mousemove 事件，尽管我认为这种方法更复杂且不太理想。我之所以提到它，是因为一些开发人员(包括刚开始时的我)对 JS 事件处理很反感。

我用我编写的自定义 ColdFusion 标签做了类似的事情，它会生成一个 float 的 div，用户可以点击并在屏幕上拖动。同理。如果您需要我，我可以挖掘出来更深入地回答任何其他问题。

祝你好运!

关于javascript - 放大图像并用鼠标指针移动它，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8120530/

并用javascriptdocumentgetElementByIdstylehtmlcssimage

有关javascript - 放大图像并用鼠标指针移动它的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby - 匹配大写字母并用后续字母填充，直到一定的字符串长度 - 2

    我有一个驼峰式字符串，例如:JustAString。我想按照以下规则形成长度为4的字符串:抓取所有大写字母；如果超过4个大写字母，只保留前4个；如果少于4个大写字母，则将最后大写字母后的字母大写并添加字母，直到长度变为4。以下是可能发生的3种情况:ThisIsMyString将产生TIMS(大写字母)；ThisIsOneVeryLongString将产生TIOV(前4个大写字母)；MyString将生成MSTR(大写字母+tr大写)。我设法用这个片段解决了前两种情况:str.scan(/[A-Z]/).first(4).join但是，我不太确定如何最好地修改上面的代码片段以处理最后一种

  3. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  4. ruby-on-rails - 添加回形针新样式不影响旧上传的图像 - 2

    我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司

  5. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  6. ruby-on-rails - 在 Ruby (on Rails) 中使用 imgur API 获取图像 - 2

    我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path

  7. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  8. ruby - 是否有将图像文件转换为 ASCII 艺术的命令行程序或库？ - 2

    有这样的事吗？我想在Ruby程序中使用它。 最佳答案 试试这个http://csl.sublevel3.org/jp2a/此外，Imagemagick可能还有一些东西 关于ruby-是否有将图像文件转换为ASCII艺术的命令行程序或库？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/6510445/

  9. ruby-on-rails - 使用 Dragonfly 从 URL 分配图像 - 2

    我正在使用Dragonfly在Rails3.1应用程序上处理图像。我正在努力通过url将图像分配给模型。我有一个很好的表格:{:multipart=>true}do|f|%>RemovePicture?Dragonfly的文档指出:Dragonfly提供了一个直接从url分配的访问器:@album.cover_image_url='http://some.url/file.jpg'但是当我在控制台中尝试时:=>#ruby-1.9.2-p290>picture.image_url="http://i.imgur.com/QQiMz.jpg"=>"http://i.imgur.com/QQ

  10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

随机推荐