將光標懸停在圖像上時，如何使圖像左右移動？

在這個項目中，我編寫了一個animation.js文件，當我將鼠標懸停在某個圖像上時，該文件將允許新圖像左右滑動。我的功能將允許新圖像向左滑動，但是當我想讓圖像滑回到右側時，我必須將光標從圖像上移開。但是，當圖像懸停在圖像上方1秒後，圖像會向左滑動並向左滑動。我只想更改animation.js文件，而不是其他文件。我怎麼做？將光標懸停在圖像上時，如何使圖像左右移動？

這是我的代碼目前確實到一個網頁（這些鏈接是從互聯網上找到隨機的例子）：http://static.buildinternet.com/live-tutorials/interactive-picture/index.html，

這正是我希望我的代碼做（這是我的任務）：https://www.youtube.com/watch?v=cAMjrGbmlJg

這裏是我的animation.js文件：

$(document).ready(function() { 

    $('.listing_address').hover(function(){ 
     if ($(this).parent().is('.open')) { 

      $(this).closest('.listing').find('.glass').fadeOut(500); 
      $(this).closest('.listing').find('.house').animate({'left' : '25px'}); 
      $(this).closest('.listing').removeClass('open'); 

     }else{ 

      $(this).closest('.listing').find('.glass').fadeIn(500); 
      $(this).closest('.listing').find('.house').animate({'left' : '10px'}); 
      $(this).closest('.listing').addClass('open'); 

     } 

    }); 


});

這裏是我的listing.css文件：

@charset "UTF-8"; 

body {font-family: Helvetica, Arial, sans-serif; } 
p { margin: 0px; } 
a { color: #bf572c; } 
a:hover { color: #000; } 

.house_images { 
    float:left; 
    } 

.listing_container { 
    margin: 20px 0px 0px 20px; 
    padding: 0px 0px 5px 0px; 
    width: 700px; 
    background: url(../images/corkboard_tile.jpg) 0px 0px; 
} 

.listing { 
    margin: 0px 15px 35px 15px; 
    padding: 35px 15px 15px 70px; 
    position: relative; 
    background: #fff url(../images/note_top.jpg) no-repeat 0px 0px; 
} 

.listing_address { margin: 0px; padding: 0px 0px 5px 0px; display: inline-block; cursor: help; font-weight: bold; color: #1f4f71; } 

.listing_detail_container { height: 0px; overflow: hidden; padding: 0px; color: #bf572c; } 
.listing_detail { margin: 0px; padding: 0px; color: #bf572c; font-weight: normal; } 

.listing .house { width: 40px; height: 50px; position: absolute; top: 20px; left: 25px; background: url(../images/house.png) 0px 0px; } 
.listing .glass { width: 43px; height: 40px; position: absolute; top: 42px; left: 23px; background: url(../images/magnifier.png) 0px 0px; display: none;} 

.main-navigation ul.nav-menu, 
.main-navigation div.nav-menu > ul { 
     display: inline-block !important; 
     text-align: left; 
     width: 100%; 
} 
.main-navigation ul { 
     margin: 0; 
     text-indent: 0; 
} 
.main-navigation li a, 
.main-navigation li { 
     display: inline-block; 
     text-decoration: none; 
} 
.main-navigation li a { 
     border-bottom: 0; 
     color: #6a6a6a; 
     line-height: 3.6; 
     text-transform: uppercase; 
     white-space: nowrap; 
} 
.main-navigation li a:hover{ 
     color: #000; 
} 
.main-navigation li { 
     margin: 0 30px 0 0; 
     position: relative; 
} 



#hero { 
    height:175px; 
    width:960px; 
} 
#hero div { 
    position:absolute; 
    z-index: 0; 
} 
#hero div.previous { 
    z-index: 1; 
} 
#hero div.current { 
    z-index: 2; 
}

這裏是我的sold.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Real Estate Sold</title> 
     <link rel="stylesheet" type="text/css" href="includes/listing.css" /> 
     <script type="text/javascript" src="includes/jquery-1.6.min.js"></script> 
     <script src="includes/"></script> 
     <script type="text/javascript" src="includes/listing.js"></script> 
     <script src = "animation.js"></script> 
    </head> 
    <body> 

<div class="listing_container"> 
     <div class="header"><img src="images/header.jpg" width="750" height="150"></div> 
     <div id="hero"> 
      <div class="current"><img src="images/landscape1.jpg" alt="landscape" width="700" height="175" /></div> 
      <div><img src="images/landscape2.jpg" alt="landscape" width="700" height="175" ></div> 
      <div><img src="images/landscape3.jpg" alt="landscape" width="700" height="175" ></div> 
      <div><img src="images/landscape4.jpg" alt="landscape" width="700" height="175" ></div> 
     </div> 

<nav class="main-navigation" role="navigation"> 
<div> 
<ul id="menu-main-menu" class="nav-menu"> 
<li><a href="index.html">Home</a></li> 
<li><a href="index.html">Regional Info</a></li> 
<li><a href="index.html">Current Listings</a></li> 
<li><a href="#">Sold</a></li> 
<li><a href="index.html">About Us</a></li> 
</ul></div> 
</nav> 

    <div class="listing"> 
       <div class="listing_address" id="martin"> 
        <p>Martin House Complex</p> 
       </div> 
       <div class="listing_detail_container" > 
        <div class="listing_detail" id = "martin_detail"> 
         <ul><li>The Martin House Complex was built in 1905.</li><li> The square footage is 14,978 sq. ft. </li></ul> 
         <p> <a href="images/martin1.jpg" ><img src="images/martin_ext.jpg" alt="martin" /></a></p> 
         </ul> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing" id="robie"> 
       <div class="listing_address"> 
        <p>Robie House</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Robie House was built in 1909.</li><li> The square footage is 13,070 sq. ft. </li></ul> 

         <p><img src="images/robie_ext.jpg"></p> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing"> 
       <div class="listing_address" id="Taliesin"> 
        <p>Taliesin</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Taliesin House was built in 1911.</li><li> The property sits on a 600 acre lot. </li></ul> 

         <p><img src="images/taliesin_ext.jpg"></p> 
        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 


      <div class="listing"> 
       <div class="listing_address" id="water"> 
        <p>Falling Water</p> 
       </div> 
       <div class="listing_detail_container"> 
        <div class="listing_detail"> 
         <ul><li>The Falling Water House was built in 1937.</li><li> The property includes the main house, a four-bay carport, servants' quarters, and a guest house. </li></ul> 
         <p><img src="images/water_ext.jpg"></p> 


        </div> 
       </div> 
       <div class="house"></div><div class="glass"></div> 
      </div> 

     </div> 


    </body> 
</html>

來源

2016-08-01 user_13439903

您可以使用mouseenter/mouseleave這樣的：

$('.listing_address').hover(function() { //Mouse Enter 
    var listing = $(this).closest('.listing'); 
    listing.find('.glass').fadeOut(500); 
    listing.find('.house').animate({ 
     'left': '25px' 
    }); 
    listing.removeClass('open'); 
}, function() { //Mouse Leave 
    var listing = $(this).closest('.listing'); 
    listing.find('.glass').fadeIn(500); 
    listing.find('.house').animate({ 
     'left': '10px' 
    }); 
    listing.addClass('open'); 
});

或更緊湊的版本：

$('.listing_address').hover(function(ev) { 
    var mouEnt = ev.type === "mouseenter", 
     listing = $(this).closest('.listing'); 
    listing.find('.glass').fadeToggle(500); 
    listing.find('.house').animate({left: mouEnt ? 25 : 10}); 
    listing.toggleClass('open'); 
});

我希望這將有助於您。

來源

2016-08-01 02:28:43

該代碼似乎不適合我，你能告訴我爲什麼嗎？ –

你把它放在$（document）.ready（function（）{......}）裏面嗎？ @MichaelBao –

所以我找到了一種讓圖像左右移動的方法，但是我不知道如何在視頻中顯示的圖像上懸停1秒後放大鏡消失。在我的代碼中，放大鏡只保留在那裏直到我移開光標。我希望它在1秒後消失。有沒有辦法做到這一點？ –

將光標懸停在圖像上時，如何使圖像左右移動？

回答

相關問題