Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >jQuery无限缩略图库

jQuery无限缩略图库
EN

Stack Overflow用户
提问于 2012-12-18 20:07:50
回答 2查看 1.9K关注 0票数 3

我正在寻找一个jQuery插件,使画廊像这样一个在闪光灯:

http://flash.tutfactory.com/interface/infinite-sliding-gallery/

我在谷歌上搜索了“jquery无限画廊”、“jquery滚动画廊”等,但找不到任何类似的东西。当你向下滚动页面时,它返回的是Ajax加载的无限滚动图库。你知道有什么插件可以实现这样的功能吗?免费还是高级对我来说都无关紧要。有趣的是,我发现了这个帖子:https://stackoverflow.com/questions/13874677/looking-for-jquery-infinite-carousel-with-mouseover-activation有类似的问题,它几天前被关闭了,我希望我的不会。我发现在jQuery中最接近的东西是:http://manos.malihu.gr/tuts/jquery_thumbnail_scroller_horizontal_full_light.html#,但我不知道如何根据鼠标离边缘的距离实现不同的滚动速度,以及如何让它平滑循环。

谢谢你的帮助。

EN

回答 2

Stack Overflow用户

发布于 2012-12-18 20:23:09

如果你想增加或降低滚动的速度,你可以创建一个透明的div,它将位于你想要鼠标悬停的地方。然后运行一个函数:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
$("div").mouseover(function(){
    //increase here your speed
}).mouseout(function(){
    //decrease here your speed
});

这里有一个如何编写无限转盘图库的教程:http://www.queness.com/resources/html/carousel/index.html

票数 0
EN

Stack Overflow用户

发布于 2012-12-18 20:26:51

至于使用鼠标来控制滚动,这里有一些代码来自我做的一个网站,它有鼠标滚动,但它是针对特定大小的画廊-而不是无限的。正如adamb在评论中所说的,你可能必须自己构建它,但这可以作为一些启动代码来检测鼠标位置。基本上,你只需要通过移动图像来创建无限大的错觉,因为它们滚动出了视图。如果它们滚动到左侧,则在它们滚动时将图像移动到右侧,反之亦然。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
            $(function() {
buildThumbs();

function buildThumbs() {
    $('div.portfolio_gallery').each(function() {
        var width = 0;

        var wrapper = $(this).find('.gallery'); 
        wrapper.find('.scroller a').each( function() {
            width += $('.single_img').outerWidth(true);
        });

        var thumbs = $(this).find('.scroller');
        thumbs.css('width', width + 'px');

        makeScrollable(thumbs, wrapper);
    });
}
   function makeScrollable(thumbs, wrapper) {
    var width = wrapper.innerWidth();

    wrapper.scrollLeft(0);

    var leftBuffer = 100;
    var rightBuffer = 100;

    //When user move mouse over menu
    wrapper.unbind('mousemove').bind('mousemove', function(e) {
        var xPos = e.pageX - wrapper.offset().left - leftBuffer;
        var xMax = wrapper.innerWidth() - rightBuffer;
        if(xPos > 0 && xPos < xMax) {
            var perc = xPos / (xMax - leftBuffer);
            var scrollAmt = thumbs.outerWidth(true) - wrapper.innerWidth();
            wrapper.scrollLeft(perc * scrollAmt);
        }
    });
   }
 });
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/13940670

复制
相关文章
如何使用JavaScript从字符串中删除HTML标签?
我们可以使用以下示例从带有 JavaScript 的字符串中删除 HTML 标签 -
很酷的站长
2022/12/04
12.9K0
如何使用JavaScript从字符串中删除HTML标签?
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
翻译:疯狂的技术宅 原文:https://medium.freecodecamp.org/how-to-remove-falsy-values-from-an-array-in-javascript-e623dbbd0ef2
疯狂的技术宅
2019/05/06
9.5K0
如何删除 JavaScript 数组中的虚值[每日前端夜话0x55]
Google JavaScript API 的使用
您可以使用JavaScript客户端库与Web应用程序中的Google API(例如,人物,日历和云端硬盘)进行交互。请按照此页面上的说明进行操作。
拿我格子衫来
2022/01/24
3K0
ABAP 字段隐藏的方法
正文部分 ​ *数据库表spfli相关 TABLES: spfli, sflight. START-OF-SELECTION. SKIP. *输出 ULINE AT /(91). WRITE: / sy-vline,(15) '航线承运人', sy-vline , (15) '航班连接', sy-vline, (15) '国家代码', sy-vline,(15) '起飞城市', sy-vline, (15) '起飞机场',sy-vline. ULINE A
matinal
2020/11/27
1K0
HTML中的javascript交互
在Android开发中,越来越多的商业项目使用了Android原生控件与WebView进行混合开发,当然不仅仅就是显示一个WebView那么简单,有时候还需要本地Java代码与HTML中的javascript进行交互,Android也对交互做了很好的封装,所以很容易实现例如:点击网页中的按钮Android调用原生对话框,点击网页中的电话号码调用Android拨号APP。这篇给大家介绍下如何实现Android与HTML+JS的交互。 有的人可能不理解什么是javascript,可以简单理解为它在HTML中
xiangzhihong
2018/02/01
4K0
HTML中的javascript交互
如何使用 Python 隐藏图像中的数据
秘密数据可以是任何格式的数据,如文本甚至文件。简而言之,隐写术的主要目的是隐藏任何文件(通常是图像、音频或视频)中的预期信息,而不实际改变文件的外观,即文件外观看起来和以前一样。
小白学视觉
2022/02/14
4K0
如何使用 Python 隐藏图像中的数据
JavaScript值延迟脚本和异步脚本
Html 4.0为<script>标签定义了defer属性,这个属性的用途是表名脚本在执行时,不会影响页面的构造。也就是说,脚本会延迟到整个页面解析完毕之后在运行,因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。但是有一种特殊情况,看如下代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charse
郑小超.
2018/01/24
8320
如何在 JavaScript 中处理 HTML 事件?
在Web开发中,JavaScript是一种常用的脚本语言,用于增强网页的交互性和动态性。HTML事件是用户与网页交互时发生的动作,如点击、鼠标移动、键盘输入等。本文将介绍如何在JavaScript中处理HTML事件,以实现更丰富的用户体验和交互功能。
海拥
2023/06/27
2820
如何在 JavaScript 中处理 HTML 事件?
隐藏在网站 CSS 中的窃密脚本
在过去的两年里,网络犯罪分子使用了各种各样的方法来在网上商城的各个地方隐藏针对Credit Card的信息窃取代码,以防止被安全检测方案所发现,而这些信息窃取代码也被称之为Web Skimmer或Magecart脚本。
FB客服
2021/01/25
8280
隐藏在网站 CSS 中的窃密脚本
shell脚本 从自定义的值中随机抽取+不重复
日期:2018/6/12 介绍:从数组里随机抽一个,但不会重复,相比之下python比较好做出效果
陈不成i
2021/06/24
3.3K0
Python脚本之根据excel统计表中字段值的缺失率实用案例
有时候,我们需要去连接数据库,然后统计下目标库表字段的值有多少个空值,并且计算出它的缺失率:
数据仓库践行者
2021/12/06
2.7K0
Python脚本之根据excel统计表中字段值的缺失率实用案例
从javascript脚本混淆说起
脚本病毒是一个一直以来就存在,且长期活跃着的一种与PE病毒完全不同的一类病毒类型,其制作的门槛低、混淆加密方式的千变万化,容易传播、容易躲避检测,不为广大网民熟知等诸多特性,都深深吸引着各色各样的恶意软件制作者 … 小到一个不起眼的lnk快捷方式,大到一个word文档,都是脚本的载体。本文主要以 js脚本为例(特指JScript,下同 ),具体结合实际样本,讲述混淆方式及其混淆类型检测相关知识,文章受限于样本个数及其种类,存在一定的局限性,但大致情况应当不会相差太大。本系列首先会对jscript及其脚本进行
FB客服
2018/02/28
1.5K0
从javascript脚本混淆说起
如何处理数据库表字段值中的特殊字符?
现网业务运行过程中,可能会遇到数据库表字段值包含特殊字符的场景,此场景虽然不常见,但只要一出现,其影响却往往是致命的,且排查难度较高,非常有必要了解一下。
披头
2020/11/20
4.8K0
问与答98:如何根据单元格中的值动态隐藏指定的行?
Q:我有一个工作表,在单元格B1中输入有数值,我想根据这个数值动态隐藏行2至行100。具体地说,就是在工作表中放置一个命令按钮,如果单元格B1中的数值是10时,当我单击这个命令按钮时,会显示前10行,即第2行至第11行;再次单击该按钮后,隐藏全部的行,即第2行至第100行;再单击该按钮,则又会显示第2行至第11行,又单击该按钮,隐藏第2行至第100行……也就是说,通过单击该按钮,重复显示第2行至第11行与隐藏第2行至第100行的操作。如图1所示。
fanjy
2021/03/12
6.4K0
EasyGBS平台如何更改token值的时效性?
EasyGBS国标视频云服务可支持通过国标GB28181协议将设备接入,实现视频的实时监控直播、录像、语音对讲、云存储、告警等功能,同时也支持将接入的视频流进行全终端、全平台分发,分发的视频流包括RTSP、RTMP、FLV、HLS、WebRTC等格式。平台部署简单,无需插件就能实现web浏览器播放,也支持手机浏览器、微信、PC等各种终端的无插件播放。
TSINGSEE青犀视频
2022/05/12
2.6K0
JAVASCRIPT 如何创建SEARCH字段
matinal
2023/10/14
1820
javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
许多项目不是从定义的结构开始, 而是随着时间的流逝而变化。例如, 一个基本博客可能从一开始就使用HTML格式将其内容存储在数据库中, 但是由于其简单性, 总有一天某人可能希望开始使用Markdown而不是HTML, 在这种情况下, 你需要从一种格式转换为另一种格式。如果你将服务器端逻辑与JavaScript(Node.js)一起使用, 甚至直接在浏览器中将HTML转换为编辑器中的Markdown, 则可以使用Turndown库轻松地完成此类任务, HTML到用JavaScript编写的Markdown转换器。
全栈程序员站长
2022/10/04
4K0
点击加载更多

相似问题

在linux机器上运行jar时UnauthorizedAccessException

20

GSON:运行jar文件时的MalformedJsonException (在Eclipse中工作正常)

20

在不同的机器/PC上运行jar文件

13

无法运行以前工作正常的.jar文件

11

Java JAR文件在本地机器上运行,而在其他机器上缺少文件

13
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文