滚动鼠标悬停在图像中以受控的方式在div内容(Scroll the div content in a

2019-08-05 06:41发布

我有一个有限的高度和宽度与内容超出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);
});     

Answer 1:

你需要在同一时间以动画一点点..

 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> 

演示在 http://jsfiddle.net/gaby/xmAvh/



文章来源: Scroll the div content in a controlled manner on hovering over an image