Wie bewegen Sie ein Bild nach links und rechts, wenn Sie den Mauszeiger darüber bewegen?

In diesem Projekt habe ich eine animation.js-Datei geschrieben, mit der ein neues Bild nach links und rechts verschoben werden kann, wenn ich den Mauszeiger über ein bestimmtes Bild halte. Meine Funktion lässt das neue Bild nach links gleiten, aber wenn das Bild wieder nach rechts verschoben werden soll, muss ich den Cursor vom Bild wegbewegen. Ich möchte jedoch, dass das Bild nach 1 Sekunde des Bilds nach rechts verschoben wird, wenn es über dem Bild schwebt. Ich möchte nur die animation.js-Datei ändern, nicht die anderen Dateien. Wie mache ich das?Wie bewegen Sie ein Bild nach links und rechts, wenn Sie den Mauszeiger darüber bewegen?

Dies ist, was zur Zeit der Code einer Webseite hat (diese Links aus dem Internet gefunden Zufalls Beispiele sind): http://static.buildinternet.com/live-tutorials/interactive-picture/index.html,

Das ist genau das, was ich meinen Code (das ist meine Aufgabe) zu tun: https://www.youtube.com/watch?v=cAMjrGbmlJg

Hier ist meine animation.js Datei:

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

     } 

    }); 


});

Hier meine listing.css Datei ist:

@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; 
}

Hier

ist meine sold.html Datei:

<!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>

Quelle

2016-08-01 user_13439903

Sie mouseenter/mouseleave wie diese verwenden:

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

oder eine kompaktere Version:

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

Ich hoffe, dies wird dazu beitragen, Sie.

Quelle

2016-08-01 02:28:43

Dieser Code scheint nicht für mich arbeiten, können Sie mir sagen, warum? –

Hast du es in '$ (document) .ready (function() {......})' gesetzt? @MichaelBao –

So habe ich einen Weg gefunden, die Bilder nach links und rechts zu bewegen, wenn ich darüber schwebe, aber ich weiß nicht, wie man die Lupe nach 1 Sekunde des Schwebens über dem Bild verschwinden lässt, wie ich es im Video gezeigt habe. In meinem Code bleibt das Vergrößerungsglas nur so lange, bis ich den Cursor weg bewege. Ich möchte, dass es nach 1 Sekunde verschwindet. Gibt es eine Möglichkeit, dies zu tun? –

Wie bewegen Sie ein Bild nach links und rechts, wenn Sie den Mauszeiger darüber bewegen?

Antwort

Verwandte Themen