将鼠标悬停在图像上时以受控方式滚动 div 内容

2023-11-29

我有一个高度和宽度有限的 div,其内容超出了 div 的大小。因此,我在 div 的顶部和底部放置了两个图像,并且我希望内容相对于我悬停在其上的图像上下滚动。我已经成功地实现了悬停,但它不受控制,即使我将鼠标移离图像,它也会一直持续到最后。因此,我希望在将鼠标移开后立即停止滚动,并且当我再次将鼠标悬停在图像上时,我希望滚动从停止的位置恢复。jsfiddle

HTML:

<div id="hover"> HOVER ME </div>

<div id="container">

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...)
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................

The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full article...)
Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
</div>
<div id="hover2"> HOVER ME </div>​

CSS:

#hover{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#hover2{
   width:200px;
   height:20px;
 border:1px solid #cc0000;   
}
#container{
  width:500px;
  height:300px;
 overflow-y:auto;   
    border:1px solid #000;
    overflow: hidden;
}
#container div{
  width:100px;
height:100px;    
    float:left;
}​

JavaScript:

$('#hover').hover(function(){
    $('#container').animate({ scrollTop: $('#container')[0].scrollHeight }, 1000);
});
$('#hover2').hover(function(){
    $('#container').animate({ scrollTop: 0 }, 1000);
});     


你需要一次制作一点动画..

var amount = '';

function scroll() {
  $('#container').animate({
    scrollTop: amount
  }, 100, 'linear', function() {
    if (amount != '') {
      scroll();
    }
  });
}
$('#hover').hover(function() {
  amount = '+=10';
  scroll();
}, function() {
  amount = '';
});
$('#hover2').hover(function() {
  amount = '-=10';
  scroll();
}, function() {
  amount = '';
});
#hover {
  width: 200px;
  height: 20px;
  border: 1px solid #cc0000;
}

#hover2 {
  width: 200px;
  height: 20px;
  border: 1px solid #cc0000;
}

#container {
  width: 500px;
  height: 300px;
  overflow-y: auto;
  border: 1px solid #000;
  overflow: hidden;
}

#container div {
  width: 100px;
  height: 100px;
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="hover"> HOVER ME </div>

<div id="container">

  The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It
  had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's
  names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts,
  and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at
  least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full
  article...) Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
  The Mauritius Blue Pigeon is an extinct species of blue pigeon formerly endemic to the Mascarene island of Mauritius in the Indian Ocean east of Madagascar. It has two extinct relatives from the Mascarenes and three extant ones from other islands. It
  had white hackles around the head, neck and breast and blue plumage on the body, and it was red on the tail and the bare parts of the head. These colours were thought similar to those of the Dutch flag, a resemblance reflected in some of the bird's
  names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts,
  and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in the 17th century and was described several times thereafter, but very few accounts describe the behaviour of living specimens. Several stuffed and at
  least one live specimen reached Europe in the 1700s and 1800s. Only three stuffed specimens exist today, and only one bird was ever depicted when alive. The species is thought to have become extinct in the 1830s due to deforestation and predation. (Full
  article...) Recently featured: Action of 1 January 1800 – Terang Boelan – Muckaty Station............................................................................................................................................................................
</div>
<div id="hover2"> HOVER ME </div>

Demo at http://jsfiddle.net/gaby/xmAvh/

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将鼠标悬停在图像上时以受控方式滚动 div 内容 的相关文章

随机推荐