带有 href css 动画(横幅)的图像不起作用(仅在 FireFox 中)
image with href css animation (banner) not working (only in FireFox)
我正在使用 CSS 关键帧和动画制作自动滚动横幅(Keyframe
移出 margin
,例如 @keyframes teammove { 0% { margin-left: 0px; } 100% { margin-left: -1200px; }
)。不幸的是,它在 Firefox 中不起作用。
我测试了不同大小div和溢出设置,最终发现是<a href = ""> </a>
标签的问题。
这里是横幅的工作(没有 href)和非工作(有 href)版本。任何解决方案都会有所帮助。
您可以尝试使用 javascript onclick 事件先调用图像,然后再调用图像调用函数,例如,
<!DOCTYPE html>
<html>
<body>
<p>Click the button to set the href value to http://www.google.com.</p>
<button onclick="myFunction()">Take me to google.com</button>
<script>
function myFunction() {
location.href = "http://www.google.com";
}
</script>
</body>
使用喜欢,
<img onclick="myFunction()" src="http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg" width="300" height="200" class="firstimg">
<img onclick="myFunction()" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="300" height="200">
最好在包装纸上设置动画,而不是在每张单独的幻灯片上设置。
我修改了你的笔。删除了浏览器前缀(现在很少需要它们),将动画移到包装器中,并将所有图像包装在锚点中。这里绝对不需要JavaScript;
.bannerframe {
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
}
适用于 Chrome、Firefox 和 Edge
我正在使用 CSS 关键帧和动画制作自动滚动横幅(Keyframe
移出 margin
,例如 @keyframes teammove { 0% { margin-left: 0px; } 100% { margin-left: -1200px; }
)。不幸的是,它在 Firefox 中不起作用。
我测试了不同大小div和溢出设置,最终发现是<a href = ""> </a>
标签的问题。
这里是横幅的工作(没有 href)和非工作(有 href)版本。任何解决方案都会有所帮助。
您可以尝试使用 javascript onclick 事件先调用图像,然后再调用图像调用函数,例如,
<!DOCTYPE html>
<html>
<body>
<p>Click the button to set the href value to http://www.google.com.</p>
<button onclick="myFunction()">Take me to google.com</button>
<script>
function myFunction() {
location.href = "http://www.google.com";
}
</script>
</body>
使用喜欢,
<img onclick="myFunction()" src="http://portfoliotheme.org/enigmatic/wp-content/uploads/sites/9/2012/07/placeholder1.jpg" width="300" height="200" class="firstimg">
<img onclick="myFunction()" src="https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png" width="300" height="200">
最好在包装纸上设置动画,而不是在每张单独的幻灯片上设置。
我修改了你的笔。删除了浏览器前缀(现在很少需要它们),将动画移到包装器中,并将所有图像包装在锚点中。这里绝对不需要JavaScript;
.bannerframe {
width: 3000px;
height: 200px;
animation: teammove 5s linear infinite;
}
适用于 Chrome、Firefox 和 Edge