Cs陪玩:玩GIF“onmouseover”但只玩一次

我在我的网站上有一个 GIF,我希望它只在你悬停在它上面时播放,但只播放一次。所以我不希望用户能够再次触发事件,除非他们刷新页面。有人知道如何做到这一点?

到目前为止,我所拥有的是一个静态图像(gif 的第一帧),在 mouseover 上,它更改为一个不会循环的 gif。

HTML格式

<img cl="footer" src="images/website footer static.jpg" onmouseover="this.src='images/website footer.gif';"

CSS公司

.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75); }
2

这很容易通过移动你的 JavaScript 到一个函数,并添加removeAttribute('onmouseover')后,它改变了src

function playGIF(elm) {
    elm.src = 'http://www.image-mapper.com/photos/original/missing.png?1263880893';
    elm.removeAttribute('onmouseover');
}
.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}
<img cl="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" />

JSFiddle:http://jsfiddle.net/mavpx438/

如果您查看 Developer Tools 中呈现的img代码,您会注意到,在将鼠标移到图像上之前,onmouseover属性是存在的,但是当您移到图像上时,图像会立即发生变化,然后删除img标记的onmouseover属性。

我希望这会有所帮助。^ ^

Edit

因为它似乎你的“回答问题”和我的回应评论被删除,我会在这里添加我的解释。

您曾询问是否仅使用 HTML / CSS。尽管我们使用伪:hover执行鼠标悬停效果,但它会将显示恢复到原始状态,而不会进行任何更改。更改呈现的代码的唯一方法是通过脚本进行永久更改,这是您需要做的。

这就是语言的工作方式。HTML5 在我们可以做的事情上有了很大的改进,但它仍然是一个固定的渲染代码。一旦代码被渲染,你需要一些更动态的操作。高级 HTML5 将允许一些功能,但我们正在谈论高端开发,这将依赖于 JavaScript。也许使用 HTML5 我们会看到动态渲染,但我对此表示怀疑。

我希望这些额外的信息有助于澄清为什么 HTML / CSS 选项不是一个。

0

试试这个Fiddle使用 jquery 在悬停时更改属性,然后在悬停时使用unbind禁用悬停效果

$('.footer').hover(function () {
    $(this).attr("src", "http://www.thiefmissions.com/targa/fan.gif");
   $(this).unbind('mouseenter mouseleave');
});
.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}
<script src="https://ajax.googlea.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img cl="footer" src="images/website footer static.jpg" ;>

本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处

(407)
云服务器防火墙:防火墙块 Go开发服务器(firewall for server)
上一篇
玩游戏时cpu占用多少正常:Pygame如何在玩游戏时记录键盘移动
下一篇

相关推荐

  • concord是什么牌子:穿越时空,体验Concord的非凡之美

    Concord是一个美国安全品牌,专门为家庭和企业提供安全产品。它的产品包括家用安全系统、安全监控设备、智能锁、安全门等。代码:CONCORD…

    2023-03-13 11:05:04
    0 58 28
  • cords是什么意思:如何使用Cords来提高生产力

    示例示例Cords是一种常用的设计模式,它允许你把多个函数链接在一起,以便更好地处理复杂的逻辑。代码示例:…

    2023-01-28 07:40:52
    0 79 60
  • java foreach跳出本次循环:使用break语句跳出Java Foreach循环

    Java foreach跳出本次循环可以使用continue语句。continue语句会跳过当前循环中剩余的语句,然后继续下一次循环。…

    2023-01-11 12:12:41
    0 37 24
  • what can i do for you 回答:How Can I Help You?

    这取决于您想要我做什么。我可以帮助您完成一些编程任务,如创建网站,编写脚本,编写应用程序,编写API,编写数据库,编写算法,编写机器学习模型等。我也可以帮助您解决其他技术问题,如调试代码,优化性能,解决安全问题等。例如,我可以为您编写以下代码,以实现某些功能:…

    2023-01-26 13:54:16
    0 64 32
  • mifare classic tool怎么用:使用Mifare Classic Tool来管理你的Mifare Classic卡

    Mifare Classic Tool是一款开源的Android应用程序,它可用于读取和写入Mifare Classic NFC标签。它的主要功能是:…

    2023-02-17 15:24:20
    0 90 35
  • cordic算法详解:实现CORDIC算法的数学原理及其应用

    CORDIC(COordinate Rotation DIgital Computer)算法是一种基于反复旋转的数字算法,可以用来计算几何函数(如正弦、余弦、正切等)和其他复杂函数,因此也被称为旋转算法。它是一种非常有效的算法,可以在很少的时间内实现几何函数的计算。CORDIC算法的基本思想是:通过反复旋转向量,以达到计算几何函数的目的。它的具体步骤如下:…

    2023-01-14 16:01:55
    0 41 61
  • struct和class区别 A Comparison of Their Characteristics and Uses

    示例示例struct和class的主要区别在于:struct是值类型,class是引用类型。…

    2023-01-27 15:29:38
    0 99 98
  • curl 超时时间设置解决网络请求延迟的最佳实践

    示例示例cURL 超时时间设置是指在 cURL 发出请求后,等待服务器响应的最长时间。如果超过了设定的超时时间,则会收到一个超时错误。可以使用 curl_setopt() 函数来设置 cURL 超时时间,该函数的第一个参数是 cURL 资源句柄,第二个参数是 CURLOPT_TIMEOUT,用于设置 cURL 超时时间。…

    2023-02-22 07:17:34
    0 78 33

发表评论

登录 后才能评论

评论列表(29条)