HI!
我想创建一个基于鼠标位置的平滑滚动条。这个想法是创建一个具有固定宽度的外部 div。内容非常宽,必须根据鼠标位置向左或向右滚动。如果内容是“无限”或“无尽”的,那就太好了。内容是一个非常宽的图像,“无缝”地重复。
有人可以帮我用 jQuery 创建这个吗?
提前致谢!
Alex
您可以将图像设置为背景div
并动画化background-position
用jquery。 (因为它引起了我的兴趣,这是一个实现)
demo http://jsfiddle.net/gaby/72yhW/ 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);
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)