向下滚动时替换 div 中的图像

2023-11-29

想要在向下滚动和向上滚动时用图像 resized.png 替换 #logo 中的图像应恢复正常。

尝试使用代码

<script type="text/javascript">
$(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 100) $('#topbar, .cart-label').fadeOut('slow');
$('#logo').css({'background-image':'url(http://elementsmart.com/wp-content/uploads/2013/06/resized.png)','background-repeat':'no-repeat'})
if($(this).scrollTop() < 100) $('#logo, #topbar, .cart-label').fadeIn('fast');
})
});

resized.png 确实出现在顶部,但想完全替换它并在滚动到顶部时恢复。 该网站的链接是:http://elementsmart.com/product/deep-azure-rajasthani-necklace-set/sum1 可以建议吗?


更新答案

检查这里,工作演示http://jsfiddle.net/yeyene/49HA3/1/

您试图错误地提供背景图像atag,实际上你需要改变srcimg标签内a tag.

这就是为什么你有 2 张图像。一个为a标签背景图像,另一个是img within a tag.

$(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() > 100) {
            $('#topbar, .cart-label').fadeOut('slow');
            $('#logo-img img')
                .css({'width':'184px','height':'33px'})
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/resized.png');
        }
        if($(this).scrollTop() < 100) {
            $('#logo, #topbar, .cart-label').fadeIn('fast');
            $('#logo-img img')
                .css({'width':'184px','height':'60px'})    
                .attr('src','http://elementsmart.com/wp-content/uploads/2013/06/logo2.png');
        }
    });
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

向下滚动时替换 div 中的图像 的相关文章

随机推荐

  • 为什么我以编程方式创建的按钮的样式不同?

    从 Android Studio 中具有空 Activity 的新项目开始 我添加了一个带有单个按钮的线性布局activity main xml
  • iOS Web 应用程序:禁用输入文本字段的自动对焦

    我有一个简单的 iOS Web 应用程序问题 当您创建输入文本字段时 用户单击文本字段 mobile safari 会自动聚焦输入字段 自动将用户单击的输入字段移动到屏幕中央 视觉键盘将画布推到顶部或左侧或任何可以将输入字段居中的空间 好吧
  • ListSelector适用于整个列表

    我有一个带有列表选择器的简单列表 如下所示
  • 尝试安装 Homebrew 时出现库未加载错误 (libidn.11.dylib)

    尝试在 Lion 上安装 Homebrew 当我做 usr bin ruby e curl fsSL https raw github com gist 323731 我收到此错误 dyld Library not loaded opt l
  • 记录 Jenkins 中的更改

    在这里继续我的问题 Jenkins 在外部可执行文件上的构建通过或失败 我的构建过程现在使用 MS Build 从源代码构建 并作为构建过程的一部分执行自定义程序 我在程序中写入控制台的任何内容都将记录在控制台输出中 但是 我还想在用户界面
  • C 将 argv[] 中的字符串分配给 char 数组

    我有以下代码 它从命令行读取文件名并打开该文件 include
  • setcookie,无法修改标头信息 - 标头已发送[重复]

    这个问题在这里已经有答案了 我是PHP新手 刚刚练习PHP setcookie 失败了 http localhost 测试 索引 php
  • 如何将 DNS 条目添加到 Windows 容器的主机文件中?

    我的主机的 IIS 中有一个网站 可以通过以下方式访问http mysite local地址 我还有一个在此主机上运行的 Windows 容器 我正在尝试使用 curl http mysite local 从我的 Windows 容器连接到
  • 使用 NDEF Android 应用程序记录 (AAR) 获取 NFC 标签

    我正在开发 NFC 应用程序 为了启动我的应用程序 我使用了 NDEF 标签 其中包含 AAR NDEF 记录 这很好用 但现在我想直接用应用程序读取标签内容 我怎样才能做到这一点 当我从手机上取下标签并再次触摸它时 它已经可以工作了 但我
  • 映射超类的命名查询

    我试图在映射的超类上声明 NamedQuery 但收到此错误 org hibernate hql ast QuerySyntaxException VoipCall 未映射 select v from VoipCall v where v
  • TinkerPop:添加顶点图 API 与遍历 API

    背景 在其中之一SO posts推荐使用 Traversal API 而非 Graph API 来进行变异 所以我尝试了一些测试 发现 Graph API 似乎更快 我完全相信这个建议 但我试图了解它如何更好 我确实尝试过谷歌搜索 但没有找
  • cout 是同步/线程安全的吗?

    一般来说 我假设流不同步 由用户来执行适当的锁定 但是 做类似的事情cout在标准库中得到特殊待遇 也就是说 如果多个线程正在写入cout他们会腐败吗cout目的 我知道即使同步 您仍然会得到随机交错的输出 但交错是否有保证 也就是说 使用
  • 在 Python 中从 CSV 文件访问列数据

    我有一个包含 A B C D 列和 N 行的 CSV 文件 问题是这些列中的数据长度不同 即有些是 4 5 有些是 4 52 我的问题分为两部分 我如何从 csv 文件访问这些列 我使用此代码来打印 csv 文件的内容并将它们读入数组 im
  • React 中的 Markdown 与 Typescript

    有没有办法使用 Typescript 解析 React 中的 Markdown 我正在尝试做这样的事情 import as ReactMarkdown from react markdown OR import ReactMarkdown
  • 数据和同步 - 手动同步邮件。日历和联系人

    我正在尝试编写一个应用程序 只需单击一下即可同步我的邮件和日历 在浏览这个论坛后 我发现了一些很好的提示 并编写了一个简短的测试应用程序 该应用程序使用我的第一个谷歌帐户并开始同步 到目前为止 代码正在运行 但目前仅同步了联系人 Accou
  • 从Python列表继承后重写append方法

    我想创建一个只能接受某些类型的列表 因此 我尝试从Python中的列表继承 并重写append 方法 如下所示 class TypedList list def init self type self type type def appen
  • 如何在 JavaScript 中查找文本框中的单词

    我正在制作一个类似于 Google Now 应用程序的网站 我想知道如何让 JavaScript 在文本框中查找某个单词 例如 如果有人在文本框中输入 显示天气 JavaScript 世界会看到关键字 天气 它会向我显示天气 这是我的代码
  • 错误:SQLite 从文件导入数据

    我正在尝试从以逗号分隔的文件加载数据 例子 A positive 9619 A095CDB461A1FEED positive 1 当我尝试在 sqlite3 数据库中加载此文件时 出现错误 sqlite gt mode csv featu
  • Google 地图屏幕截图不适用于使用 html2canvas 的标记和标记集群

    我正在使用 Flask 做 python 项目 其中我使用 google 地图 api 来显示项目中的地图 我实施html2canvas脚本成功捕获地图 但我在地图上也有标记 但它没有捕获 所以我尝试使用html2canvasPython代
  • 向下滚动时替换 div 中的图像

    想要在向下滚动和向上滚动时用图像 resized png 替换 logo 中的图像应恢复正常 尝试使用代码