个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
我正在使用下面的代码创建一个带有滑动背景图像的全宽全高网站。在 Firefox 和 IE 上一切正常，但在 Chrome 和 Safari 上，背景在动画期间摇晃。我还注意到动画的速度随着时间的推移而增加(不是实际的 var，但它似乎只是在一段时间后移动得更快)关于如何修复它的任何想法或者可能是完全避免 animate() 的新解决方案？
$(function() {
//settings for slider
var width = '100%';
console.log(width)
var animationSpeed = 2000;
var pause = 5000;
var currentSlide = 1;
//cache DOM elements
var $slider = $('#slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);
var interval;
function startSlider() {
interval = setInterval(function() {
$slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {
if (++currentSlide === $slides.length) {
currentSlide = 1;
$slideContainer.css('margin-left', 0);
}
});
}, pause);
}
function pauseSlider() {
clearInterval(interval);
}
$slideContainer
.on('mouseenter', pauseSlider)
.on('mouseleave', startSlider);
startSlider();
});html,body {
background-color:black;
height: 100%;
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
min-height: 100%;
height: 100%;
padding: 0;
}
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.row {
padding: 0;
}
.header {
background-color: white;
height: 85px;
}
#slider {
width: 100%;
height: calc(100% - 250px);
overflow: hidden;
}
#slider .slides {
display: block;
width: 600%;
height: 100%;
margin: 0;
padding: 0;
}
#slider .slide {
float: right;
list-style-type: none;
width: 16.666666667%;
height: 100%;
}
.footer {
color: white;
height: 165px;
padding: 72px 0 0 470px;
}
.slide1 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide2 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide3 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide4 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}
.slide5 {background: url('https://placeimg.com/1000/1000/people/grayscale') no-repeat center center fixed; background-size: cover;}<body>
<div class="container">
<div class="header">
<img class="logo" src="http://placehold.it/156x33">
</div>
<h1>Proin bibendum ligula massa nec maximus.</h1>
<div id="slider">
<ul class="slides">
<li class="slide slide1"></li>
<li class="slide slide2"></li>
<li class="slide slide3"></li>
<li class="slide slide4"></li>
<li class="slide slide5"></li>
<li class="slide slide1"></li>
</ul>
</div>
<div class="footer">
<div>
<ul>
<li>Lorem ipsum dolor sit</li>
</ul>
</div>
</div>
</div>
</body>最佳答案
我发布的代码现在运行良好。似乎所有浏览器都修复了错误。
关于javascript - 使用 chrome 应用 jQuery 动画时出现意外的摇晃效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36984057/
25
4
0
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许在 Stack Overflow 上提出有关通用计算硬件和软件的问题。您可以编辑问题，使其成为
当我尝试在 db2 中创建表时，它抛出以下错误 $ db2 CREATE TABLE employee(emp_id INT NOT NULL, emp_name VARCHAR(100)) sh:
我有: while (i < l) { if (one === two) { continue; } i++; } 但是 JSLint 说: Problem at line 1 chara
所以我有这个代码: char inputs[10] = ""; int numInputs = 0; while (numInputs < 10){ char c; printf("E
var ninja = { name: 'Ninja', say: function () { return 'I am a ' + this.name; }
我收到一个我不明白的错误，请注意，我是编码新手，所以这可能是一个简单的错误。 #include using namespace std; int main() { //Initialise Fahr
我正在使用 javascript 和 react，由于某种原因，我收到了一个奇怪的 token 错误。 这是发生错误的代码: renderNavBar() { if (!this.us
Closed. This question is off-topic。它当前不接受答案。
由于某种我无法解释的原因，编译器正在输出一个错误，指出它发现了一个意外的#else 标记。 这发生在文件的开头: #if defined( _USING_MFC ) #include "stda
这个问题不太可能帮助任何 future 的访问者；它只与一个小的地理区域、一个特定的时间点或一个非常狭窄的情况有关，这些情况并不普遍适用于互联网的全局受众。为了帮助使这个问题更广泛地适用，visit
这个问题在这里已经有了答案: Difference between sh and Bash (11 个答案) 关闭 2 年前。 我正在编写一个简单的 bash 脚本，我在 XX `(' unexpe
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。 此问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-topic
我在 Windows 7 上编写了一个脚本，它不断给我一个错误“(此时出乎意料。”对于以下代码 if %vardns%=="NODNS" ( netsh interface ipv4 set ad
我正在尝试使用xmlstarlet（使用xpath）解析XML文件，但是出现语法错误，并且我不知道如何更正我的代码。 这是我的脚本： #!/bin/bash if [ $1=="author" ];
以下脚本旨在在目录中的所有文件上运行程序“senna”，并将每个文件的输出(保留输入文件名)写入另一个目录 for file in ./Data/in/*; do ./senna -iobta
我从 challengers.coffee 运行此代码，并收到错误 ActionView::Template::Error (SyntaxError: [stdin]:3:31:unexpected
我在 config.db.database; 行中有语法错误(意外的标记“.”)。这是我在文件中的代码 const config = require('../config/config') const
这一定很明显，但是我无法使它正常工作。我正在尝试传输应该用于构建$ classKey的对象，这反过来又导致删除所需的软件(amd64或i386)。好吧，这里的代码: $name = @("softwa
我正在使用 1.3.7 版学习 Grails，但我一直无缘无故地遇到以下语法错误: unexpected token: mapping @ line x, column y. 有一次，我通过运行“gr
我正在尝试找出这段Pascal代码的问题 function Factorial(n: integer): integer; begin if n = 0 then Result := 1
我是一名优秀的程序员,十分优秀！