我有一个简单的网页,主页上的 div 中有一个图像,并且想在页面加载(仅一次)后使用 javascript 将图像更改为替代图像,我目前正在使用动画 gif这样做,但更愿意使用 javascript。
我的 JavaScript 技能有限。
谢谢
我有一个简单的网页,主页上的 div 中有一个图像,并且想在页面加载(仅一次)后使用 javascript 将图像更改为替代图像,我目前正在使用动画 gif这样做,但更愿意使用 javascript。
我的 JavaScript 技能有限。
谢谢
我假设您不会使用 jQuery,所以我创建了简单的 js 示例,该示例在页面加载后淡出一个图像并淡入另一个图像。您可以在此处查看示例http://jsfiddle.net/rJzPV/7/
function fadeOut(elem, time, callbackFn) {
var startOpacity = elem.style.opacity || 1;
elem.style.opacity = startOpacity;
(function go() {
elem.style.opacity -= startOpacity / (time / 100);
// for IE
elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
if (elem.style.opacity > 0.11)
setTimeout(go, 100);
else {
elem.style.display = 'none';
if (callbackFn)
callbackFn();
}
})();
}
function fadeIn(elem, time) {
var startOpacity = 0.1;
elem.style.opacity = startOpacity;
elem.style.display = "";
(function go() {
elem.style.opacity -= -startOpacity / (time / 1000);
// for IE
elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
if (elem.style.opacity < 1)
setTimeout(go, 100);
})();
}
window.addEvent('load', function () {
function changePicture() {
var _myImg = document.getElementById("myImage");
_myImg.src = "http://www.google.com/logos/2012/klimt12-hp.jpg";
fadeIn(_myImg, 1000);
}
var _myImg = document.getElementById("myImage");
fadeOut(_myImg, 1000, changePicture);
});