颜色逐渐变化

2024-01-27

屏幕左上角的标志如何随着鼠标滑过而逐渐改变颜色?我认为它是用 jquery 完成的。如果您不知道代码,您能给我指点可以的教程吗?谢谢。

http://www.shopdev.co.uk/blog/ http://www.shopdev.co.uk/blog/

更新: 谢谢大家,我已经发布了下面代码的工作版本,

<html>

    <head>            

        <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">

            $(document).ready(function(){

                // load the logo transition
                $("#logo span").css("opacity","0");
                $("#logo span").css("display","block");
                // logo animation
                $("#logo").hover(function() {
                    $("#logo span").stop().animate({opacity:1},'slow');
                }, function() {
                    $("#logo span").stop().animate({opacity:0},'slow');
                });


            });

        </script>

        <style type="text/css">
            #logo span{
                background: url(logo2.gif) no-repeat scroll center bottom;
                width:257px;
                height:75px;
                position:absolute;
            }
            img{
                border:0;
            }
        </style>

    </head>

    <body>

        <div id="logo"><a href="#"><span></span><img src="logo.gif"/></a></div>

    </body>

</html>

您是否尝试查看该页面的源代码?这是不透明度的变化。

// load the logo transition
$("#logo span").css("opacity","0");
$("#logo span").css("display","block");
// logo animation
$("#logo").hover(function() {
    $("#logo span").stop().animate({opacity:1},'slow');
}, function() {
    $("#logo span").stop().animate({opacity:0},'slow');
});

因此,一张图像覆盖另一张图像,前面的图像逐渐淡入淡出。不是颜色变化。

请注意代码上方的警告:

// whoah there...  This source code is copyright ShopDev.  By all means, use this website as a source of inspiration - just don't plagiarize! //
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

颜色逐渐变化 的相关文章

  • Rails 上的 SASS 无效 CSS 错误

    我正在尝试使用http startbootstrap com stylish portfolio http startbootstrap com stylish portfolio但是 在我的 Rails 应用程序中 我在 vintage
  • Chrome 和 Safari 错误::不允许加载本地资源: file:///D:/CSS/Style.css

    当我在 chrome 或 safari 中访问我的 aspx 页面时 它在控制台中显示此错误 不允许加载本地资源 file D CSS Style css 在 IE 和 FF 中一切正常 我使用外部 CSS 通过 aspx 页面链接 我已经
  • 使用 JSONP 时出现“无效标签”?

    我的 JSONP 请求有问题 数据不会显示 Firebug 显示 无效标签 错误 我的 JavaScript ajax url link dataType jsonp beforeSend function xhr var base64 b
  • 为什么使用 MarkForCheck() 和 setTimeout?

    我对 ChangeDetectorRef 中的 MarkForCheck 方法有疑问 对于一种用法我必须使用this cd markForCheck 因为在控制台中我获取了值 但它没有在视图上更新 setTimeout gt this ch
  • jQuery/JavaScript“this”指针混淆

    当函数时 this 的行为bar被称为让我困惑 请参阅下面的代码 当从单击处理程序调用 bar 时 有什么方法可以将 this 安排为普通的旧 js 对象实例 而不是 html 元素 a class with a method functi
  • Meteor:即使设置了 ANDROID_HOME 也未设置

    操作系统 Ubuntu 14 04 框架 流星1 1 0 2 应用名称 Songofy 这是输出meteor install sdk android meteor install sdk android Found Android bund
  • ajax调用后如何停止刷新页面?

    ajax 调用后我无法停止刷新页面 我尝试过放置 e preventDefault 并返回 false 但我的页面又刷新了 我不知道代码有什么问题或者什么 请帮助我在ajax调用后停止刷新页面 解决这个问题对我来说会有很大的帮助 提前致谢
  • 防止 Firefox Web 通知自动关闭

    我已经在 Firefox 中将 Web 通知与服务器发送的 DOM 事件结合使用 不幸的是 通知在大约两到三秒后消失 我更喜欢 Chrome 的方法 即让消息保持可见 在任何给定时间最多显示三个 直到用户单击通知 这是我所拥有的 windo
  • 使用添加“title”属性换行符 到 JSX 元素

    我知道我可以在 HTML 中添加换行符title属性使用 10 但 React 避免了这一点 例如 这是一个 React 组件 其中包含一个标准的 未由 React 处理的组件title包含换行符的属性 并且可以在浏览器中看到效果 但是如果
  • 无法使用 Excel JavaScript API 设置 NumberFormat

    我正在使用 Excel Javascript API 在搜索文档后 仍然找不到我想要实现的解决方案 因此 我想将所有内容设置为数字格式 文本 这样 Excel 的自动格式设置就不会与任何单元格的内容混淆 不会删除前导零或更改日期格式 文档建
  • 将 ngModel 绑定到自定义指令

    所以我已经在这个问题上工作了一个星期了 但我似乎无法理解整个指令的事情 我读了很多帖子 揭秘指令 http www toptal com angular js angular js demystifying directives 指令 ht
  • 设置引导工具提示上的箭头样式[重复]

    这个问题在这里已经有答案了 我正在尝试使用以下方式设置工具提示样式 tooltip inner 但我遇到了麻烦 因为我找不到如何设置工具提示小箭头的样式 如屏幕截图所示 工具提示的箭头是黑色的 我想在其上添加新颜色 any suggesti
  • 以编程方式在 Highcharts 中使用缩放绘制矩形和线条

    我正在使用 Highcharts 进行一些编程绘图Highcharts Renderer http api highcharts com highcharts Renderer using path and rect 在下面的代码中 我手动
  • 等高列并将最后一项与底部对齐

    我有一个列表 其中每个li有嵌套容器 我尝试为所有列表项保留相同的高度 并将最后一个 div 推到底部 我将如何使用 flex 来做到这一点 ul list container display inline flex justify con
  • 如何阻止用户重复单击 jQuery AJAX 调用?

    我有一个包含以下脚本的网页 JavaScript function LinkClicked var stage this id var stop ContentPlaceHolderMenu txtDate val var nDays Co
  • 如何使弹出窗口溢出:在溢出内可见:自动上下文

    我有一个 div 列表 如果超过父框 overflow x 应该滚动 并且在悬停时 我想看到一个弹出窗口 我的问题是 如果我将鼠标悬停在任何子 div 上 弹出窗口将被考虑用于溢出计算 但我只想让它在所有内容之上可见 而不是使其扩展滚动区域
  • Tizen SDK:找不到变量:tizen

    我正在尝试使用 Tizen SDK 创建一个 Web 应用程序 当我启动应用程序时 一切都很好 但是当我在模拟器上按 后退 按钮时 没有任何反应 并且我看到一条消息 55435 js main js 9 ReferenceError 找不到
  • 构造函数可以返回什么值来避免返回 this ?

    确切的情况是什么 returnJavascript 中的语句可以返回除this当使用构造函数调用时new关键词 Example function Foo return something var foo new Foo 如果我没记错的话 如
  • iPhone Mobile Safari:强制键盘打开

    这是一个 HTML CSS JS jQuery iPad 应用程序 我有一个按钮 可以向下滑动输入表单 我想让用户将注意力集中在输入上 然后启动键盘 这是我正在处理的 但不起作用 myFormField focus 这确实集中了输入 但无法
  • 使用 ASP.Net 和 Ajax 的登录页面

    我正在尝试使用 html ajax 和 ASP NET 制作登录页面 数据确实传递给 ajax 函数 但是当我调试 asp 页面时 用户名和密码以 NULL 发送 该代码应该获取用户名和密码 然后返回用户 ID html页面 div Use

随机推荐