Question

请你看看this Demo，让我知道如何改变。{3}} 仅当.css()上的鼠标向左或向右移动时，才使用background-position-x .homeSlide事件.homeSlide规则？现在发生的事情是，只要鼠标进入jQuery('.homeSlider').mousemove(function(move){ var moveMouse = (move.pageX * -1 / 3); jQuery('.homeSlider .slide').css({ 'background-position-x': moveMouse + 'px' }); }); jQuery('.homeSlider').mouseleave(function(){ jQuery('.homeSlider .slide').animate({ 'background-position-x': '0' }); }); jquery运行CSS规则但我只想在鼠标移动时才这样做

.homeSlider {width: 100%; height: 400px; background: red;}
.homeSlider .slide {width:100%; height: 100%; background: url(http://1.bp.blogspot.com/-JHKDpZ5orFc/T0523m_rAlI/AAAAAAAAAEU/zYZv__hk74I/s1600/Panorama_by_erikcollinder.jpeg) 0 0;}
.slide {transition: background-position-x 0.5s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="homeSlider">
    <div class="slide"></div> 
</div>

conv1

Answer 1

问题是当鼠标进入图像元素时，它已经有一些x位置，因此图像会移动x。所以我们需要确定x位置的起点。
试试这段代码：

var startingPos = 0;

jQuery('.homeSlider').mousemove(function(move){
    var moveMouse = (move.pageX * -1 / 3);
    if(startingPos == 0){
        startingPos = moveMouse;
        return;
    } else {
        moveMouse = moveMouse-startingPos;
    }
    jQuery('.homeSlider .slide').css({
        'background-position-x': moveMouse + 'px'
    });
});

jQuery('.homeSlider').mouseleave(function(){
    startingPos = 0;
    jQuery('.homeSlider .slide').animate({
        'background-position-x': '0'
    });
});

Answer 2

尝试将background-position-x 0.5s更改为background-position-x 0.0s。校验这个 fiddle与其他答案user3580410的组合提供了

Answer 3

尝试将左侧和右侧放在＆＃34;＆lt;＆＃34;或＆＃34;＆gt;＆＃34;它们上的图像href会产生一个悬停动作，它会以您希望它做出反应的方式修改图像的位置。这是一个例子： http://tympanus.net/Blueprints/FullWidthImageSlider/

有关jQuery Mousemove向左和向右移动的问题

3 个答案: