Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

加个点击放大, ,怎或者悬浮放大的功能,方便查看,而不用滚动 #734

Open
cypggs opened this issue Aug 25, 2023 · 9 comments

Comments

@cypggs
Copy link

cypggs commented Aug 25, 2023

加个点击放大, ,怎或者悬浮放大的功能,方便查看,而不用滚动
image

@wong2
Copy link
Collaborator

wong2 commented Aug 25, 2023

是把单个聊天窗口放大吗?放大成一个浮动窗口?

@cypggs
Copy link
Author

cypggs commented Aug 25, 2023

是把单个聊天窗口放大吗?放大成一个浮动窗口?

是的,能够快速放大,快速缩回去。方便查看,滚动比较鸡肋。

@wong2
Copy link
Collaborator

wong2 commented Aug 25, 2023

明白🫡

@cypggs
Copy link
Author

cypggs commented Aug 25, 2023

明白🫡

高效,哈哈。

@strengthen8
Copy link

付费用户,表示问题+1

@cypggs
Copy link
Author

cypggs commented Dec 6, 2023

明白🫡

user: 你知道有个 chathub的谷歌浏览器插件吗

bard: 是的,我知道有一个名为 ChatHub 的谷歌浏览器插件。它是一个聊天机器人客户端,允许用户同时使用多个聊天机器人。目前,它支持 ChatGPT、Bing Chat、Google Bard、Claude、讯飞星火及一些开源模型,并在持续集成更多机器人。

ChatHub 的功能包括:

  • 在一个应用里使用多种聊天机器人
  • 同时和多个聊天机器人聊天,方便对比回答
  • 支持 ChatGPT API、Azure OpenAI service
  • 支持 GPT-4
  • Prompt Library
  • 快捷键一键唤起
  • Markdown 及代码高亮
  • Dark mode
  • 联网搜索

ChatHub 的下载地址是:https://chrome.google.com/webstore/detail/chathub-all-in-one-chatbo/iaakpnchhognanibcahlpcplchdfmgma

如果您想同时使用多个聊天机器人,ChatHub 是一个不错的选择。

user: 这个插件支持多个窗口聊天,可是体验不是很好,我想让鼠标停在某个窗口的时候让他自动放大,方便查看窗口内的所有内容,请问怎么写这个功能

bard: 要实现这个功能,可以使用 Chrome 的 document.onmouseover: https://developer.mozilla.org/en-US/docs/Web/Events/mouseover 事件。当鼠标悬停在某个元素上时,该事件会被触发。

ChatHub 的插件代码中,可以使用以下代码来实现鼠标停留窗口自动放大功能:

// 获取所有 ChatHub 窗口
const chatHubWindows = document.querySelectorAll('.chathub-window');

// 为所有 ChatHub 窗口注册 mouseover 事件
for (const chatHubWindow of chatHubWindows) {
  chatHubWindow.addEventListener('mouseover', () => {
    // 将窗口放大到最大
    chatHubWindow.style.width = '100%';
    chatHubWindow.style.height = '100%';
  });
}

这段代码首先获取所有 ChatHub 窗口,然后为每个窗口注册 mouseover 事件。在 mouseover 事件的处理函数中,将窗口放大到最大。

如果您想让窗口放大到特定的尺寸,可以修改上述代码如下:

// 获取所有 ChatHub 窗口
const chatHubWindows = document.querySelectorAll('.chathub-window');

// 为所有 ChatHub 窗口注册 mouseover 事件
for (const chatHubWindow of chatHubWindows) {
  chatHubWindow.addEventListener('mouseover', () => {
    // 将窗口放大到指定尺寸
    chatHubWindow.style.width = '500px';
    chatHubWindow.style.height = '500px';
  });
}

这段代码将窗口放大到 500 像素宽和 500 像素高。

您还可以根据需要修改上述代码,以实现更复杂的功能。例如,您可以根据窗口的大小或内容来决定是否放大窗口。

大佬求支持

@cypggs
Copy link
Author

cypggs commented Mar 8, 2024

明白🫡

求支持哈,过了好久了哈,目前要点开历史,或者移动滚动太不优雅了。鼠标停留悬浮查看是我觉得最优雅的方式。

@cypggs
Copy link
Author

cypggs commented May 30, 2024

明白🫡

大佬,过去这么久了,还有机会加入这个功能么,期待(✧∀✧),pro 用户表示 6 宫格看内容有点不优雅。

@cypggs
Copy link
Author

cypggs commented May 30, 2024

"""
理想之设计方案:当鼠标滑行至宫格之某一位置时,即刻悬浮并放大展示当前宫格之内容;而鼠标移开时则恢复如初;
"""

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants