两张图切换

Posted 2020-09-22 永醉雨辰

<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‘"/>

2.

<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)
  }
)