В этом проекте я написал файл 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>
Этот код, похоже, не работает для меня, можете ли вы сказать мне, почему? –
Вы поместили его внутри '$ (document) .ready (function() {......})'? @MichaelBao –
Итак, я нашел способ сделать изображения влево и вправо, когда я наводил на него курсор, но я не знаю, как заставить увеличительное стекло исчезать через 1 секунду, нависая над изображением, как показано на видео. В моем коде увеличительное стекло остается там до тех пор, пока я не уйду от курсора. Я хочу, чтобы он исчез через 1 секунду. Есть ли способ сделать это? –