当前位置：文江博客话题详情

使用 Jquery 悬停时切换图像

发布于 2024-09-15 14:49:24 字数 221 浏览 3 评论 0原文

首先，请不要建议我使用 css 来执行此操作。

我需要使用 Jquery 在悬停时在两个图像之间进行切换。我需要在页面加载时下载两个图像（两个切换图像）。否则第一次会产生延迟时间。由于我的图像是主页上的两个横幅。我需要创建一个图像对象，从而预加载它，然后切换对象。

我无法使用简单的 css 来执行此操作，因为第一次用户会出现延迟，因为页面加载时图像不存在。而且看起来很糟糕。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

别在捏我脸啦 2024-09-22 14:49:24

$(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 事件，以确保它们在允许悬停之前确实已加载。

$(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]);
   });
});

That should work, even if I'm not sure if that is what you need. You can add an onload event to both images to makes sure, they are really loaded before allowing hovering.

回复收藏 0 原文

禾厶谷欠 2024-09-22 14:49:24

以下是以下代码的快速演示：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;
  };

Here's the Quick Demo of below Code : 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;
  };

回复收藏 0 原文

~没有更多了~