jquery mouseover / mouseout改变滚动位置

时间：2015-04-09 21:42:53

标签： jquery

我是jquery的新手，我正在努力解决以下问题：

从研究中我得出了一个快速的jsfiddle。它还没有完成，我想要实现的目标是：

当我将鼠标移到'DIV 1'时，我希望'Link30'到顶部（并且'鼠标输出时'Link30'保持在顶部）。

然后我希望'Link50'在鼠标悬停'DIV 2'时返回顶部（并且'Link50'在鼠标输出时保持在顶部）。

我想鼠标悬停div几次，并且每次都有相关链接到滚动div的顶部。

当你鼠标悬停'DIV 1'并且'Link30'到达顶部然后当你鼠标悬停'DIV 2'时它停留在'Link30'而不是像我想的那样移动到'Link50'。

希望这是有道理的。感谢。

以下是我的代码示例，但您最好看到 jsfiddle 。

$( "div.overout1" )

.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
$('a').filter(function(index) { return $(this).text() === 'Link30';    }).addClass('on');
var offset = $('.on').offset().top - $('.links').scrollTop();
if(offset > window.innerHeight)
    {
    $('.links').scrollTop(offset);
    }
})

.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
$('a').filter(function(index) { return $(this).text() === 'Link30'; }).removeClass('on');
});

$( "div.overout2" )

.mouseover(function() {
$( this ).find( "span" ).text( "mouse over " );
$('a').filter(function(index) { return $(this).text() === 'Link50'; }).addClass('on');
var offset = $('.on').offset().top - $('.links').scrollTop();
if(offset > window.innerHeight)
    {
    $('.links').scrollTop(offset);
    }
})

.mouseout(function() {
$( this ).find( "span" ).text( "mouse out " );
$('a').filter(function(index) { return $(this).text() === 'Link50'; }).removeClass('on');
});

3 个答案:

答案 0 :(得分：1)

如果你将一个类用于你想要滚动的位置以及一些标志，例如开/关，那就更好了。

<强>演示 https://jsfiddle.net/jc8aqz65/

<强>脚本 

var tclass;
var cla = 0;
var clab = 0;
var topa = $('.30').position().top - 10;
var topb = $('.50').position().top - 10;
$(".overout1, .overout2").mouseover(function () {
    tclass = $(this).attr("class")
    $(this).find("span").text("mouse over ");
    if (cla == 0 && tclass == "overout1") {
        $('.links').animate({
            scrollTop: topa
        }, 500);
        cla = 1;
    } else if (clab == 0 && tclass == "overout2") {
        $('.links').animate({
            scrollTop: topb
        }, 500);
        clab = 1;
    }
}).mouseout(function () {
    $(this).find("span").text("mouse out ");
    if (tclass == "overout1") {
        clab = 0;
    } else {
        cla = 0;
    }
});

答案 1 :(得分：1)

这是一个稍微优化的版本：

https://jsfiddle.net/fkhbcxzw/15/ 

linkScroll($('div.overout1'), 'Link30');
linkScroll($('div.overout2'), 'Link50');

function linkScroll(item, identify) {

    var object;

    item
    .on('mouseenter touchstart', function() {

        object = $(this).find('span');
        object.text('mouseenter-touchstart');
        $('a').removeClass('on').filter(function() {return $(this).text() === identify}).addClass('on');

        var offset = $('.on').position().top;
        var current = $('.links').scrollTop();
        $('.links').scrollTop(current+offset);
    })
    .mouseleave(function() {

        object.text('mouseleave');
    });
}

因为输入每个div只需要一个动作，所以最好使用mouseenter，它只会触发父节点。只要您在徘徊，mouseover事件就会不必要地触发。还添加了一些移动支持。

答案 2 :(得分：1)

根据您的要求，您可以创建一个函数，您可以重复使用传递不同的参数（$ elem作为div来应用悬停效果，例如链接号）：

让我们调用函数 hoverLink 。

您可以通过多种方式实现这一目标，但可以快速修改代码......

** 

$('document').ready(function() {
    var hoverLink = function($elem, link) {

        $elem.hover(function() {
            var offset = $('.links').position().top;
            $('a').removeClass('on');

            $('a').filter(function(index) {
                return $(this).text() === 'Link' + link;
            }).addClass('on');

            offset = $('.on').position().top;
            $('.links').scrollTop(offset);

        });
    };
    var div = $('.overout1');
    var div2 = $('.overout2');
    var div3 = $('.overout3');

    hoverLink(div, 10);
    hoverLink(div2, 25);
    hoverLink(div3, 50);
});
html,body{height:100%;}
.overout1,.overout2,.overout3 {
    width: 100px;
    height:100px;
    margin:10px;
    float: left;
    color:white;
    font-weight:bold;
    font-family:helvetica;
    padding:5px;
    position:relative;
    z-index:2;
  }
.overout1 {
    background-color: green;
  } 
.overout2 {
    background-color: blue;
  } 
.overout3 {
    background-color: red;
  } 
.links{
    width: 40%;
    height: 100px;
    background-color: orange;
    float: left;
    color:white;
    font-weight:bold;
    font-family:helvetica;
    overflow:auto;
    position:relative;    
}
 
  p,span {
    line-height: 1em;
    margin: 0;
    padding: 0;
    position:relative;
    z-index:1;
  }
.on {color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<html>
<head></head>
<body>
 <div class="overout1">
       <p>DIV 1</p>
      <span>move your mouse</span>
</div>
<div class="overout2">
        <p>DIV 2</p>
      <span>move your mouse</span>
</div>
<div class="overout3">
        <p>DIV 3</p>
      <span>move your mouse</span>
</div>

<div class="links">
<a href="#">Link1</a><br />
<a href="#">Link2</a><br />
<a href="#">Link3</a><br />
<a href="#">Link4</a><br />
<a href="#">Link5</a><br />
<a href="#">Link6</a><br />
<a href="#">Link7</a><br />
<a href="#">Link8</a><br />
<a href="#">Link9</a><br />
<a href="#">Link10</a><br />
<a href="#">Link11</a><br />
<a href="#">Link12</a><br />
<a href="#">Link13</a><br />
<a href="#">Link14</a><br />
<a href="#">Link15</a><br />
<a href="#">Link16</a><br />
<a href="#">Link17</a><br />
<a href="#">Link18</a><br />
<a href="#">Link19</a><br />
<a href="#">Link20</a><br />
<a href="#">Link21</a><br />
<a href="#">Link22</a><br />
<a href="#">Link23</a><br />
<a href="#">Link24</a><br />
<a href="#">Link25</a><br />
<a href="#">Link26</a><br />
<a href="#">Link27</a><br />
<a href="#">Link28</a><br />
<a href="#">Link29</a><br />
<a href="#">Link30</a><br />
<a href="#">Link31</a><br />
<a href="#">Link32</a><br />
<a href="#">Link33</a><br />
<a href="#">Link34</a><br />
<a href="#">Link35</a><br />
<a href="#">Link36</a><br />
<a href="#">Link37</a><br />
<a href="#">Link38</a><br />
<a href="#">Link39</a><br />
<a href="#">Link40</a><br />
<a href="#">Link41</a><br />
<a href="#">Link42</a><br />
<a href="#">Link43</a><br />
<a href="#">Link44</a><br />
<a href="#">Link45</a><br />
<a href="#">Link46</a><br />
<a href="#">Link47</a><br />
<a href="#">Link48</a><br />
<a href="#">Link49</a><br />
<a href="#">Link50</a><br />
<a href="#">Link51</a><br />
<a href="#">Link52</a><br />
<a href="#">Link53</a><br />
<a href="#">Link54</a><br />
<a href="#">Link55</a><br />
<a href="#">Link56</a><br />
<a href="#">Link57</a><br />
<a href="#">Link58</a><br />
<a href="#">Link59</a><br />
<a href="#">Link60</a><br />
</div>
</body>
</html>

** https://jsfiddle.net/a_incarnati/fkhbcxzw/16/

相关问题
最新问题