替换 jQuery 中的图像扩展名,即时从 .png 变为 .gif

2024-01-03

因此,我使用 CSS3 在我的网站设计中创建侧边栏框,这效果很好而且很漂亮。使用http://css3pie.com http://css3pie.com为了在IE中创建效果。

再说一次,又好又花花公子。现在,我的问题来了——

对于每个相对定位的模块,其中都有一个绝对定位的图标,将其设置为 top: -20px 以使其具有弹出效果。显然这在 IE6 中不起作用,并且它与任何 PNG 修复代码都不能很好地配合。

不过,对于 IE6 用户,我可以改用低质量的 gif,他们可以处理。

现在,我的问题是,如果用户使用 IE6,如何将 image.png 实时切换为 image.gif?

对于这个想法我还没有找到合理的解决方案。我可以使用 IE6 样式表来替换图像 - 但是在某些情况下图像不应该基于 CSS。它们应该是正确的图像。

有什么建议么?我想要某种 jQuery 替换,但我也没有找到合理的解决方案。


有几种解决方案。也许最简单的方法是创建一个 jQuery 函数,当用户切换到低保真站点(通过链接)或您代表他们确定这一点(通过标题或条件注释)时调用该函数。

jQuery 函数可以利用属性选择器让生活变得更轻松。

function switch_to_low_fi() {
        $('img[src$=".png"]').each(function(index,element) {
          element.src = element.src.replace('.png','.gif');
        });
}

要切换 CSS 背景,我建议将它们分类为degrade或者类似的方法来为 jQuery 创建一个钩子,然后执行与上面类似的操作。

        $('.degrade').each(function(index,element) {
          element = $(element);
          var background = element.css('background-image');
          background = background.replace('.png','.gif');
          element.css('background-image', background);
        });

当然,您需要根据您的标记修改上面的代码,但这应该可以帮助您开始。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

替换 jQuery 中的图像扩展名,即时从 .png 变为 .gif 的相关文章

  • 如何使用 HTML CSS JS 创建滑块/切换来更改屏幕上的字体大小 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 is there any way I can make this gt 所以我想制作一个滑块 切换器 用户可以拖动 滑动它来改变不同的
  • 谷歌闭包编译器和jquery

    我将 js 代码复制粘贴到谷歌编译器中 当我将其复制回我的应用程序时 它不起作用 我意识到我的代码需要jquery 所以我将jquery代码和我的代码复制到google编译器中 希望它能轻松解决问题 但它也不起作用 在chrome下 代码有
  • POST 表单数据为 application/json

    我正在开发一个 API 它接收 application json post 请求 并触发一些流程 我目前的主要问题是发送一个 application json 帖子 其中包含来自输 入表单的数据 我已经尝试过 jQuery ajax 但由于
  • jQuery 仅匹配 div 中的部分 id

    昨天晚上我遇到了一个不寻常的情况 我只需要匹配 id 的一部分 让我用一个例子来让大家明白 我有几个像这样的div div div div div div div jQuery 就像 jQuery div dont know what to
  • 带有旋转文本的垂直导航

    我正在尝试实现一个包含链接的垂直导航菜单 并且我已使用 css3 将链接文本旋转到 270 度 我旋转了它 因为我希望文本从下到上 问题是当我添加顶部填充时 间距不一致 你可以看到我的代码here http jsbin com ravudu
  • CSS 无法与 CodeIgniter 一起使用

    这是我的 CI 代码的一部分 class page extends CI Controller var Page public function construct parent construct this gt Page 1 this
  • 将 javascript 合并到一个文件中

    最近阅读了雅虎的网络优化技巧并使用 YSlow 我在我的一个网站上实现了他们的一些想法http www gwynfryncottages com http www gwynfryncottages com你可以在这里看到该文件http ww
  • 电子邮件模板 - MS Office Outlook 365 中不显示表格背景图像

    为了电子邮件模板的目的 我需要在 table 它包含图像上的文本 现在我已经尝试过 https stackoverflow com a 15620571 6191987 https stackoverflow com a 15620571
  • 如何检测不渲染 .png 透明的浏览器

    我有这段代码可以根据一周中的某一天渲染图像 但在 IE6 及更低版本以及可能其他一些浏览器中 它不会呈现 png 不透明度 所以我想稍微改变一下 这样它就会检测到不渲染 alpha 透明度的浏览器 并告诉他们加载这个图像 img horar
  • 标点符号加载“动画”,javascript?

    我正在寻找一种好方法来显示一些标点符号加载 动画 我想要的是这样的 This will display at second 1 Waiting for your input This will display at second 2 Wai
  • 使用 jQuery 拖放

    我想使用 jQuery 进行简单的拖放操作 到目前为止我还没有做任何事情 但之前的尝试都没有成功 你有没有尝试过jQuery UI 可拖动 http jqueryui com demos draggable 简单用例 div class u
  • 使用 jQuery 值更新 Angular 模型

    您好 我有一个附加在我的模型上的输入字段 当用户手动输入该字段时 会在更改时调用一个函数 这工作正常 并且模型按预期在控制台日志中反映
  • 如何使用javascript隐藏div

    我想使用 Javascript 隐藏一个 div 下面是我的div div class ui dialog titlebar ui widget header ui corner all ui helper clearfix span cl
  • 无法做到最大宽度

    我有一个页面 内容如下 div testingtestingtestingtestingtestingtestingtestingtestingtesting testingtestingtestingtestingtestingtesti
  • 为什么盒子大小调整不适用于画布元素上的宽度/高度属性?

    让我们考虑一下这段代码 canvas width 150px height 150px canvas box sizing border box border 5px solid
  • 本地 401 工作,临时服务器得到 302

    我可能不会获得帮助第一次尝试所需的所有信息 但我会尽我所能 并在我们进行过程中对其进行编辑 我有一个使用 Spring Security Core 插件的 Grails 1 3 7 应用程序 我正在编写处理会话超时和 ajax 请求的代码
  • 使用jquery和coldfusion cffile上传多个文件

    不是一个真正的问题 只是想将其发布在某个地方 因为我在其他地方找不到它 现在我已经拼凑了一个工作演示 我想我会分享 这在 Coldfusion 和 Railo CFML 服务器上同样有 效 问题是 对于 CFML 开发人员来说 CFFILE
  • 附加元素在 IE11 中不起作用

    在构造函数中我创建一个元素 var this legendElement this compileLegend 后来我想在事件监听器中使用它 var takeControl function this element empty this
  • Jquery获取每个div的子子div并将信息抓取到数组中

    我有一些看起来像这样的 html div div class sub main div div
  • 两个 div 之间的匿名空白

    这里是Fiddle http jsfiddle net y6hSV 1 我有两个divs一个用于标题 另一个用于主体 在 的里面div这是标题 我还有另一个div那个 div 是floated left 因为那个floating 两者之间出

随机推荐