jquery mouseover/mouseout更改滚动位置

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

通过研究，我想出了一个快速解决方案。它还没有完全起作用，我想实现的是：

当我将鼠标移到'DIV 1'上时，我希望'Link30'位于顶部（并且'Link30'保持在mouseout的顶部）

然后，当我将鼠标移到'DIV 2'上时，我希望'Link50'位于顶部（并且'Link50'保持在mouseout的顶部）

我想将鼠标滑过div任意次数，但每次都会将相关链接转到滚动div的顶部

此时，您将鼠标悬停在'DIV 1'和'Link30'上方，但当您将鼠标悬停在'DIV 2'上方时，它将停留在'Link30'处，而不是如我所愿移动到'Link50'

希望这是有意义的。谢谢

这是我的代码示例，但您最好看到

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

---

如果将类与一些标志（例如开/关）一起用于要滚动到的位置，效果会更好

演示

脚本

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

---

如果将类与一些标志（例如开/关）一起用于要滚动到的位置，效果会更好

演示

脚本

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

---

如果将类与一些标志（例如开/关）一起用于要滚动到的位置，效果会更好

演示

脚本

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

---

如果将类与一些标志（例如开/关）一起用于要滚动到的位置，效果会更好

演示

脚本

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

---

这里有一个稍微优化的版本：

---

因为在输入每个div时只需要一个操作，所以最好使用只在父级上激发的

mouseenter

。只要您在悬停，

mouseover

事件就会不必要地持续触发。还添加了一些移动支持。

这里有一个稍微优化的版本：

---

因为在输入每个div时只需要一个操作，所以最好使用只在父级上激发的

mouseenter

。只要您在悬停，

mouseover

事件就会不必要地持续触发。还添加了一些移动支持。

这里有一个稍微优化的版本：

---

因为在输入每个div时只需要一个操作，所以最好使用只在父级上激发的

mouseenter

。只要您在悬停，

mouseover

事件就会不必要地持续触发。还添加了一些移动支持。

这里有一个稍微优化的版本：

---

因为在输入每个div时只需要一个操作，所以最好使用只在父级上激发的

mouseenter

。只要您在悬停，

mouseover

事件就会不必要地持续触发。还添加了一些移动支持。

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

例如，让我们调用函数hoverLink

你可以用很多方法来实现这一点，但是要快速修改你的代码

**

$（'document'）.ready（函数（）{
var hoverLink=函数（$elem，link）{
$elem.hover（函数（）{
变量偏移量=$（'.links'）.position（）.top；
$（'a'）.removeClass（'on'）；
$（'a'）.filter（函数（索引）{
返回$（this）.text（）=='Link'+Link；
}).addClass（“on”）；
偏移量=$（'.on'）.position（）.top；
$（'.links'）.scrollTop（偏移量）；
});
};
var div=$（'.overout1'）；
var div2=$（'.overout2'）；
var div3=$（'.overout3'）；
气垫链（第10分部）；
气垫链（第2部分，第25节）；
气垫链（第3部分，第50节）；
});
html，正文{高度：100%；}
.overout1、.overout2、.overout3{
宽度：100px；
高度：100px；
利润率：10px；
浮动：左；
颜色：白色；
字体大小：粗体；
字体系列：helvetica；
填充物：5px；
位置：相对位置；
z指数：2；
}
.超额1{
背景颜色：绿色；
} 
.超额2{
背景颜色：蓝色；
} 
.超额3{
背景色：红色；
} 
.链接{
宽度：40%；
高度：100px；
背景颜色：橙色；
浮动：左；
颜色：白色；
字体大小：粗体；
字体系列：helvetica；
溢出：自动；
位置：相对位置；
}
p、 跨度{
线高：1米；
保证金：0；
填充：0；
位置：相对位置；
z指数：1；
}
.on{color:red}

第一组

移动鼠标
第2组

移动鼠标
第3组

移动鼠标
























































































































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

例如，让我们调用函数hoverLink

你可以用很多方法来实现这一点，但是要快速修改你的代码

**


$（'document'）.ready（函数（）{
var hoverLink=函数（$elem，link）{
$elem.hover（函数（）{
变量偏移量=$（'.links'）.position（）.top；
$（'a'）.removeClass（'on'）；
$（'a'）.filter（函数（索引）{
返回$（this）.text（）=='Link'+Link；
}).addClass（“on”）；
偏移量=$（'.on'）.position（）.top；
$（'.links'）.scrollTop（偏移量）；
});
};
瓦迪