作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我目前正在使用一个小的 jquery 脚本在我为 friend 的投资组合网站创建的投资组合网站上旋转背景图片,代码如下:
counter = 1;
num_images = 9;
dir = "IMAGE DIRECTORY URL";
function rotateHeader() {
var background_img = 'url(' + dir + '/image' + counter + '.gif)';
jQuery('.category').css('background-image', background_img);
counter++; if (counter > num_images) counter = 1;
}
setInterval( "rotateHeader()", 5000 );
你可以看到它在这里工作:
www.iamanatom.com/site/the-good
我想要做的是让图像和/或颜色淡入淡出。我想我必须预加载图像才能执行此操作,然后在加载图片时添加某种淡入淡出属性。我该怎么做?
最佳答案
应该是这样的
var counter = 1,
num_images = 9,
dir = "IMAGE DIRECTORY URL";
function rotateHeader() {
var background_img = 'url(' + dir + '/image' + counter + '.gif)';
jQuery('.category').fadeOut(function() {
jQuery(this).css('background-image', background_img).fadeIn();
});
counter++; if (counter > num_images) counter = 1;
}
setInterval(rotateHeader, 5000 );
首先我们淡出当前背景图像,然后在回调函数中,更改背景图像然后淡入淡出。您可能想使用 fadeOut()
和 fadeIn()
间隔来获得你想要的效果。我还更改了 setInterval()
以使用函数名称而不是字符串来计算。
关于jquery - 如何使用 Jquery 在旋转背景图像上创建淡入淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2126493/
我是一名优秀的程序员,十分优秀!