jquery/js 图片开箱即用预览效果

发布于 2024-09-07 19:04:51 字数 686 浏览 10 评论 0原文

我正在为一个软件构建一个网页(不是浏览器,但该软件使用 webkit 作为渲染引擎)。该软件的窗口大小为800x600像素。用户将能够将图像集下载为包含 appr 的 zip 文件。每个集合 15 张图像。一个白框代表这样一个集合(见下文): 页面http://img717.imageshack.us/img717/630/bildschirmfoto20100630u.png 在这个 800x600 页面上,我想用漂亮的 ui 效果可视化每个集合的内容。我尝试使用 JavaScript/jQuery 实现某种效果,我想我在某处见过但没有添加书签: 当一个人将鼠标悬停在白色方框上时,4 个拇指会滑出该方框,为其他人跟随提供空间。它们的尺寸可能会增加。

悬停在http://img39.imageshack.us/img39/6803/bighk.jpg

有没有 jQuery 插件或其他东西可以实现这个效果? 您将如何解决这个问题或者您对其他效果有什么建议吗?

谢谢,马克斯

I am building a web page for a software (not a browser but this software uses webkit as it's rendering engine). The window of this software has a size of 800x600 pixels. Users will be able to download collections of images as zip files that include appr. 15 images per collection. A white box represents such a collection (see below):
page http://img717.imageshack.us/img717/630/bildschirmfoto20100630u.png
On this 800x600 page I want visualize the content of each collection with a nice ui effect. I try to achieve a certain effect with JavaScript/jQuery which I think I have seen somewhere but haven't bookmarked:
When one hovers over a white box, the 4 thumbs slide out of this box to make space for others to follow. They might increase in size.

hovered http://img39.imageshack.us/img39/6803/bighk.jpg

Is there a jQuery plugin or something else that can accomplish this effect?
How would you solve it or have you got suggestions for an other effect?

thanks, Max

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

终遇你 2024-09-14 19:04:51

我遇到的唯一插件是 FancyBox 或 Lightbox 之类的。但是您可以做的是将 4 张单独的图片包装在 div 标签中,将它们设置为您设计中的布局的样式,然后重复,但为每个分组使用不同的 id。然后,只需为每个 div 创建多个 FancyBox 处理程序,这样当单击一张图像时,用户只能滚动浏览该分组的图片。

看一下我制作的示例 FancyBox 示例。您无需用户单击类别来对照片进行分组,而是为它们进行分组。

The only plugin I've come across is something like FancyBox or Lightbox. But what you could do is wrap 4 individual pictures in div tags, style them to the layout in your design, and then repeat but with a different id in for each grouping. Then just create more than one one FancyBox handler for each of the divs, so when an image is clicked the user can only scroll through the pictures for that grouping.

Have a look at an example I made FancyBox Example. Instead of the user clicking categories to group photos you will have made these groupings for them.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文