如何解决基于鼠标位置的平滑滚动器jQuery
嗨! 我想基于鼠标位置创建一个平滑滚动器。这个想法是创建一个具有固定宽度的外部div。内容非常宽,必须根据鼠标位置向左或向右滚动。如果内容是\'infinite \'或\'endless \',那就太好了。内容是一个非常宽的图像,重复了'seamelesly \'。 有人可以通过在jQuery中创建它来帮助我吗? 提前感谢! 亚历克斯解决方法
您可以将图像设置为
div
的背景,并使用jquery对background-position
进行动画处理。 (并且因为它引起了我的兴趣,所以这里是一个实现)
演示http://jsfiddle.net/gaby/72yhW/
html
<div class=\"backdrop\">
<div class=\"direction left\"></div>
<div class=\"direction right\"></div>
</div>
的CSS
.backdrop{
position:relative;
height:300px; /*could be anything really..*/
width:400px; /*could be anything really..*/
border:3px solid #6699ff;
background: url(\'YOUR IMAGE PATH GOES HERE\') 0 0 repeat-x;
}
.direction{
position:absolute;
width:50%;
height:100%;
}
.left{left:0;top:0;}
.right{right:0;top:0;}
jQuery的
$(function(){
var x=0,y=0,rate=0,maxspeed=10;
var backdrop = $(\'.backdrop\');
$(\'.direction\',backdrop).mousemove(function(e){
var $this = $(this);
var left = $this.is(\'.left\');
if (left){
var w = $this.width();
rate = (w - e.pageX - $(this).offset().left + 1)/w;
}
else{
var w = $this.width();
rate = -(e.pageX - $(this).offset().left + 1)/w;
}
});
backdrop.hover(
function(){
var scroller = setInterval( moveBackdrop,10 );
$(this).data(\'scroller\',scroller);
},function(){
var scroller = $(this).data(\'scroller\');
clearInterval( scroller );
}
);
function moveBackdrop(){
x += maxspeed * rate;
var newpos = x+\'px \'+y+\'px\';
backdrop.css(\'background-position\',newpos);
}
});
,现有两个出色的jQuery插件可以完全满足您的需求:
1)http://manos.malihu.gr/jquery-thumbnail-scroller
2)http://www.convergent-evolution.co.uk/resources/jquery-plugins/scrolling-carousel/
数字1的改进之处在于,它具有更平滑的滚动动作,并且可以有选择地突出显示当前悬停的项目。
,有一个名为Smooth Div Scroll的jQuery插件可以完全做到这一点。它可以平滑地滚动内容,您可以通过用鼠标悬停在滚动器内的两个热点(左右两个,可见或不可见)上进行控制。有一个无限滚动选项。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。