Question

我的.img-area div中有一张图片，我的img标记有data-list-1和data-list-2属性。当我将鼠标悬停在.img-area img div上时必须使用淡入淡出效果与属性data-list-1和data-list-2交换，当我悬停时，它必须与默认img交换。

我得到属性和src但是我无法用淡化效果改变每个图像

你可以在演示

上看到我的作品

＆＃13;

$(function(){
 
  $(".img-area img").hover(function(){
    var elem = $(this);
    var defaultImg = elem.attr("src");
    var data_1 = elem.attr("data-list-1");
    var data_2 = elem.attr("data-list-2");
    
    $(".show").html("Default image: "+defaultImg+"<br>Data 1 img:"+data_1 +"<br/>Data 2 img:"+ data_2);
  });
  
});

＆＃13;

.img-area{
  float:left;
  margin:20px;
}
.img-area img{
  width:150px;
  height:150px;
}

＆＃13;

<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
<div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
</body>
</html>

＆＃13;

Answer 1

您可以尝试使用JQuery动画。

$(function(){
 
  $(".img-area img").hover(function(){
    var elem = $(this);
    var parentDiv = $(this).parent(); 
    
    var defaultImg = elem.attr("src");
    var data_1 = elem.attr("data-list-1");
    var data_2 = elem.attr("data-list-2");
    
    parentDiv.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_1)}).animate({ opacity: 1 }, 3000).animate({ opacity: 0 }, 3000, function(){ elem.attr("src",data_2)}).animate({ opacity: 1 },3000);
  
    
    elem.animate({"src":data_1},"slow");
    

  });
  
});

.img-area{
  float:left;
  margin:20px;
}
.img-area img{
  width:150px;
  height:150px;
}

<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
<div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
</body>
</html>

已修改

var i =0;
var timer;


$(function(){
 
  $(".img-area img").on("mouseover",function(){
    var elem = $(this);
    var parentDiv = $(this).parent(); 
    
    var defaultImg = elem.attr("src");
    var data_1 = elem.attr("data-list-1");
    var data_2 = elem.attr("data-list-2");
    
    var imageList = [data_1,data_2,data_1]
  
    myanimation(parentDiv,elem,imageList,defaultImg);
    

  });
  
});

var myanimation = function(parentElem,elem,imageList,defaultimage)
{
  if(i <imageList.length)
  {
     clearInterval(timer);
     parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",imageList[i])}).animate({ opacity: 1 }, 3000);
    timer = setInterval(function(){ i++;
       myanimation(parentElem,elem,imageList,defaultimage) }, 6000);
  }
  else
  {
    clearInterval(timer);
    parentElem.animate({ opacity: 0 }, 3000, function(){ elem.attr("src",defaultimage)}).animate({ opacity: 1 }, 3000);
  }
  
  
  
}

.img-area{
  float:left;
  margin:20px;
}
.img-area img{
  width:150px;
  height:150px;
}

<html lang="en">
<head>
  <meta charset="UTF-8" />
</head>
<body>
  
<div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <div class="img-area">
  <img src="http://themewich.com/struck/wp-content/uploads/2015/02/logs-2-426x351.jpg" data-list-1="http://themewich.com/struck/wp-content/uploads/2015/02/06.jpg" data-list-2="http://themewich.com/struck/wp-content/uploads/2015/02/05.jpg">
</div>
  
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
</body>
</html>

Answer 2

window.onload=function(){
 imgs=document.getElementsByTagName("img");
 for(i=0;i<imgs.length;i++){
    img=imgs[i];
    container=document.createElement("div");
    img.parentNode.appendChild(container);
    container.appendChild(img);
    img2=document.createElement("img");
    img2.src=img.getProperty("secondsrc");
    container.appendChild(img2);
    img2.id="secondimg";
    img.id="firstimage";
    container.style.width=img.width;
    container.style.height=img.height;
    }};

的CSS：

#firstimage{
  z-index:3;
  position:absolute;
  opacity:1;
  transition: all ease 2s;
  }
  #firstimage:hover{
  opacity:0;
  }

HTML：

<img src="url" secondsrc="url2">

悬停时使用淡入淡出效果交换图像

2 个答案: