悬停效果无法正常工作
如何加载原始图像,以便当用户将光标置于图像顶部时,它应该会自动更改而不显示白色背景,然后加载原始图片?是否有任何加载我的网页加载原始图像的代码?请告诉我。我的代码是:悬停效果无法正常工作
#middlefoto{
background-image:url(../images/middleblack.jpg);
margin-left:1px;
height:158px;
width:333px;
}
#middlefoto:hover{
background:#fff url(../images/middlecolor.jpg) 0 0 no-repeat;
}
您看到即时空白背景的原因是因为悬停图像尚未从服务器加载。为了避免这种情况,请预加载图像。有几种方法可以做到这一点,但概念是一样的:强制浏览器在实际需要之前加载图像。以下是使用JavaScript执行此操作的简单方法:
function preloadImages(sources)
{
var img = new Image();
for (var i = 0; i < sources.length; i++) {
img.src = sources[i];
}
}
preloadImages([ '../images/middlecolor.jpg', 'image2.jpg', 'image3.jpg' ]);
使用精灵定位。
ha可能是更好的答案 – 2013-03-07 18:27:50
errr !!! 404页面不存在。 :( – 2013-03-07 18:32:00
我知道有些人不喜欢w3schools,但404只是侮辱:)尝试http://css-tricks.com/css-sprites/代替。 – Rafe 2013-03-07 18:33:30
包括以离屏元件(与CSS推离屏幕)中的图像查找更多信息。这将导致浏览器下载图像,以便它可以适应翻滚。您可以在页面加载后清除屏幕外的图像。
<img src="rollover image" class="preloader" style="position:absolute; margin-left:-99999px" />
(真的不使用内联样式) 然后,如果你正在使用jQuery
$(document).ready(function(){ $('.preloader').remove(); });
清理。
它取决于浏览器下载映像的速度。您无法在加载原始图片时显示原始图片,因为原始图片也必须加上 – 2013-03-07 18:25:36