代码之家 › 专栏 › 技术社区 › Mohit Jain

使用Jquery切换悬停图像

toggle image jquery

Mohit Jain · 技术社区 · 14 年前

我需要使用Jquery在悬停时的两个图像之间切换。我需要两个图像(两个切换图像)应在页面加载时下载。否则它会第一次产生一个滞后时间。因为我的图片是主页上的两个横幅。我需要做一些事情来创建一个图片对象,从而预加载它,然后再切换对象。

我不能用简单的css做这件事,因为会有一个滞后的第一次用户作为图像是不存在的页面加载。它看起来很糟糕。

2 回复 | 直到 13 年前

jAndy 14 年前

$(function(){
   var imgs = [
       new Image(),
       new Image()
   ];

   imgs[0].src = 'http://www.typeofnan.com/pic1.jpg';
   imgs[1].src = 'http://www.typeofnan.com/pic2.jpg';

   $('#hoverelement').hover(function(){
      $(this).html(imgs[0]);
   }, function(){
      $(this).html(imgs[1]);
   });
});â

这应该管用,即使我不确定这是否是你需要的。您可以添加 onload

user372551 user372551 14 年前

下面是以下代码的快速演示: http://jsbin.com/itunu

HTML格式:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>Hello world !!</title>

</head>
<body>
  <img  />
</body>
</html>

Javascript代码:

var a = [];

a[0] = "http://i577.photobucket.com/albums/ss219/music_munster/powerpuff-girls-092.jpg";
a[1] = "http://img.listal.com/image/459059/500full.jpg";


$(document).ready(function() {
  var source = $.preload(a); 
  $('img').attr('src',source[0].src); //just an acknowledgement (pre-loading done)
  $('img').hover(function() {
    $('img').attr('src',source[1].src);
  },function() {
    $('img').attr('src',source[0].src);    
  });

});



//Image Preloading....  
var cache = [];
  $.preload = function(arr) {
    for(var i = 0; i<arr.length; i++) {
      var img = new Image();
      img.src = arr[i];
      cache.push(img);
    }
    return cache;
  };

推荐文章

Mr world wide · 使用ng更改检查的ng不起作用[重复]

6 年前

user5321787 · 单击链接时的加减切换

6 年前

Marc · 单击后显示隐藏的更多按钮

6 年前

Tom · 在VueJS/VuetifyJS中切换开关时调用函数

6 年前

Rohalt · 选择单选按钮时清除输入

6 年前

Rohalt · 如何创建一个切换按钮来添加和“删除”DOM a div?

6 年前

wpdev · Jquery在引导下拉列表中禁用伪元素上的链接

6 年前

Olga B · Vue。js:切换汉堡菜单图标

7 年前

Allie Ward · 如何在页面加载时根据锚定标记在div之间切换?

7 年前

The Walrus · 在React中切换类并设置活动类

7 年前