当您将光标悬停在图像上时，如何使图像左右移动？

时间：2016-08-01 02:22:37

标签： javascript jquery html css image

在这个项目中，我编写了一个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>

1 个答案:

答案 0 :(得分：2)

您可以像这样使用mouseenter/mouseleave：

E/AndroidRuntime: FATAL EXCEPTION: main
Process: com.omitted, PID: 2236
java.lang.NullPointerException
 at butterknife.ButterKnife.findById(ButterKnife.java:343)
 at com.omitted.LogFragment.reset(LogFragment.java:156)
 at com.omitted.LogPresenter.reset(LogPresenter.java:35)
 at com.omitted.CalculatorModel.doReset(CalculatorModel.java:251)
 at com.omitted.CalculatorPresenter.onResetClicked(CalculatorPresenter.java:107)
 at com.omitted.CalculatorFragment.reset(CalculatorFragment.java:130)
 at com.omitted.CalculatorFragment.onCreateView(CalculatorFragment.java:97)
 at android.support.v4.app.Fragment.performCreateView(Fragment.java:1974)
 at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067)
 at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1252)
 at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:742)
 at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1617)
 at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:570)
 at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:141)
 at android.support.v4.view.ViewPager.populate(ViewPager.java:1177)
 at android.support.v4.view.ViewPager.populate(ViewPager.java:1025)
 at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1545)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.support.design.widget.CoordinatorLayout.onMeasureChild(CoordinatorLayout.java:668)
 at android.support.design.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:735)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
 at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
 at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
 at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
 at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2291)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916)
 at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113)
 at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295)
 at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000)
 at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5670)
 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761)
 at android.view.Choreographer.doCallbacks(Choreographer.java:574)
 at android.view.Choreographer.doFrame(Choreographer.java:544)
 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747)
 at android.os.Handler.handleCallback(Handler.java:733)
 at android.os.Handler.dispatchMessage(Handler.java:95)
 at android.os.Looper.loop(Looper.java:136)
 t android.app.ActivityThE/AndroidRuntime: FATAL EXCEPTION: main
 ess: com.omitted, PID: 2236
 .lang.NullPointerException
 at butterknife.ButterKnife.findById(ButterKnife.java:343)
 at com.omitted.LogFragment.reset(LogFragment.java:156)
 at com.omitted.LogPresenter.reset(LogPresenter.java:35)
 at com.omitted.CalculatorModel.doReset(CalculatorModel.java:251)
 at com.omitted.CalculatorPresenter.onResetClicked(CalculatorPresenter.java:107)
 at com.omitted.CalculatorFragment.reset(CalculatorFragment.java:130)
 at com.omitted.CalculatorFragment.onCreateView(CalculatorFragment.java:97)
 at android.support.v4.app.Fragment.performCreateView(Fragment.java:1974)
 at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1067)
 at android.support.v4.app.FragmentManagerImpl.moveToState(FragmentManager.java:1252)
 at android.support.v4.app.BackStackRecord.run(BackStackRecord.java:742)
 at android.support.v4.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1617)
 at android.support.v4.app.FragmentManagerImpl.executePendingTransactions(FragmentManager.java:570)
 at android.support.v4.app.FragmentPagerAdapter.finishUpdate(FragmentPagerAdapter.java:141)
 at android.support.v4.view.ViewPager.populate(ViewPager.java:1177)
 at android.support.v4.view.ViewPager.populate(ViewPager.java:1025)
 at android.support.v4.view.ViewPager.onMeasure(ViewPager.java:1545)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.support.design.widget.CoordinatorLayout.onMeasureChild(CoordinatorLayout.java:668)
 at android.support.design.widget.CoordinatorLayout.onMeasure(CoordinatorLayout.java:735)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at android.support.v7.widget.ContentFrameLayout.onMeasure(ContentFrameLayout.java:135)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
 at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
 at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.LinearLayout.measureChildBeforeLayout(LinearLayout.java:1404)
 at android.widget.LinearLayout.measureVertical(LinearLayout.java:695)
 at android.widget.LinearLayout.onMeasure(LinearLayout.java:588)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewGroup.measureChildWithMargins(ViewGroup.java:5125)
 at android.widget.FrameLayout.onMeasure(FrameLayout.java:310)
 at com.android.internal.policy.impl.PhoneWindow$DecorView.onMeasure(PhoneWindow.java:2291)
 at android.view.View.measure(View.java:16497)
 at android.view.ViewRootImpl.performMeasure(ViewRootImpl.java:1916)
 at android.view.ViewRootImpl.measureHierarchy(ViewRootImpl.java:1113)
 at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:1295)
 at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1000)
 at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:5670)
 at android.view.Choreographer$CallbackRecord.run(Choreographer.java:761)
 at android.view.Choreographer.doCallbacks(Choreographer.java:574)
 at android.view.Choreographer.doFrame(Choreographer.java:544)
 at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:747)
 at android.os.Handler.handleCallback(Handler.java:733)
 at android.os.Handler.dispatchMessage(Handler.java:95)
 at android.os.Looper.loop(Looper.java:136)
 at android.app.ActivityTh

或更紧凑的版本：

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

我希望这会对你有所帮助。

相关问题
最新问题