两张图过渡效果实现-优快云博客

本文介绍了三种使用HTML、CSS及JavaScript实现两张图片间平滑过渡的方法。第一种直接利用<img>标签的onmouseover和onmouseout事件；第二种通过调整内联元素的透明度；第三种改变图片位置实现渐变切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<h2>两张图变换 无过度效果</h2>
<img class="circle" src="images/1-1.jpg" border="0" onmouseover="this.src='images/1-2.jpg'" onmouseout="this.src='images/1-1.jpg'"/>

<div class="inner">
    <div style="background-image: url('images/ginoble2.png');"><img src="images/ginoble.png"/></div>
</div>

$('.inner').hover(function () {
$(this).find("img").stop().animate({
       opacity: 0
    }, '200');
   } ,function () {
    $(this).find("img").stop().animate({
       opacity: 1
    }, '200');
   }
);

3.两张图切换position 过度时间

html

<h2>两张图变换position换 有时间过度</h2>
<div id="pic">
<div class="bloc"></div>
<div class="hid"></div>
</div>

css

#pic{ width:230px; height:230px; position:relative; display:block; 
overflow:hidden;
border-radius:50%; }
.bloc{ position:absolute; left:0px; top:0px; display:block; background:url(images/2-1.jpg);
width:230px; height:230px;border-radius:50%; z-index:2; }
.hid{  position:absolute; left:-230px; top:230px; display:block; background:url(images/2-2.jpg);
width:230px; height:230px; border-radius:50%; z-index:3;}

js

$("#pic").hover(
 function(){
   $(this).find('.hid').animate({left:'0px',top:'0px',opacity:1},150)
 } ,
  function(){
   $(this).find('.hid').animate({left:'-230px',top:'230px',opacity:0},150)
  }
)

转载于:https://www.cnblogs.com/zyjzz/p/6973691.html