jquery - 让2张图片动起来,类似 "marquee"风格

标签 jquery html css image animation

我正在尝试找出一个 CSS 或 jQuery 样式代码,其功能类似于 <marquee> HTML 元素。本质上,我试图在一张图片上获取 2 张图片,上下滑动大约。 10-15 像素,缓慢。单击其中一张时,它将停止另一张图片,使屏幕变暗,并且会弹出一个额外的弹出窗口,其中包含所点击图片的“简介”。

我已经设法让 jQuery/CSS 使屏幕变暗,并弹出窗口(我想我可能使这种方式比预期的更复杂),但我想使用 HTML marquee非常过时。我已经查看了所有内容,但在查找满足我要求的代码时遇到了问题。不涉及按键点击或鼠标悬停。 (我不确定如何使用 .animate 并使其自动运行。仍在学习 jQuery。

我知道.animate(on.click) [语法错误,我知道] 但我不确定如何 .animate只是时期的作品。我的意思是 z.animate(function(){z 等可能会工作 - 但当我的图片被点击时它会停止吗?

最佳答案

查看 Using CSS transitionsCSS animations在 MDN 上。

CSS 转换决定了动画的行为,animation 可以让它无限期地持续,直到它被点击。由于它可以分配给一个 CSS 类,这应该允许它像你想要的那样切换,所以要让它停止,只需从图像中删除它定义的 CSS 类。

关于jquery - 让2张图片动起来,类似 "marquee"风格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30990935/

相关文章:

css - 值 == null 的 LESS 变量,未定义?

jquery - 尝试使用相对路径使用 jquery 加载部分 View 时,IIS 7.5 上的 MVC 2 出现 404 错误 - 适用于完整路径

javascript - JQuery:选择器性能

css - 为什么 "adContent"类名在 css 中不起作用

html - DIV 元素的位置和文本

javascript - jQuery - 选择元素子元素的子元素

javascript - 如何在 angularJS 或 JQuery 或 JavaScript 中保持控件

javascript - Chartist.js:第一个选项卡中的图表尺寸太小

php - 我自己网站的内容管理系统

javascript - 在 Firefox 中更平滑的滚动过渡?