经过了半天的时间,这个使用JQuery开发出来的左右滚动菜单功能也算是完成了,暂时还没有发现错误的现象。现在把代码完整的代码拿出来分享!
scrollable.js
JQuery左右滚动菜单特效脚本代码引用片段:
var render = (typeof render == 'string' ? $(render) : render);
var content = (typeof content == 'string' ? $(content) : content);
var scrollable = $('
.attr('id','scrollable_' + content.attr('id'))
.attr('className',options.scrollable_class);
var left = $('
').attr('id','scrollableleft' + content.attr('id'))
.attr('className',options.scrollable_left_class);
left.text(options.leftText);
var container = $('
').attr('id','scrollablecontainer' + content.attr('id'))
.attr('className',options.scrollable_container_class);
content.css('line-height','29px')
.css('position','relative')
.css('left','0px')
.css('overflow','hidden')
.css('float','left');
var right = $('
').attr('id','scrollableright' + content.attr('id'))
.attr('className',options.scrollable_right_class);
right.text(options.rightText);
show = function() {
scrollable.appendTo(render);
container.appendTo(scrollable);
left.css('display','');
right.css('display','');
content.appendTo(container);
left.prependTo(scrollable);
right.appendTo(scrollable);
if(content.width() @H_403_18@ 0 && newLeft > container.position.left) {
distance = container.position.left - content.position.left;
scroll = false;
} else if(distance < 0 && newRight < container.position.right) {
distance = content.position.right - container.position.right;
scroll = false;
}
newLeft = content.position.left + distance;
newRight = content.position.right + distance;
scorll = beforeScroll ? beforeScroll(
{left: content.position.left,right: content.position.right},{left: newLeft,right: newRight}) : scroll;
if(scroll) {
content.css('left',newLeft + 'px');
content.position.left += distance;
content.position.right += distance;
setTimeout('move(' + distance + ')',options.delay);
}
}
left.mouSEOver(function() {
scroll = true;
move(options.speed);
});
right.mouSEOver(function() {
scroll = true;
move(-options.speed);
});
left.mouSEOut(function() {
scroll = false;
});
right.mouSEOut(function() {
scroll = false;
});
left.mousedown(function() {
scroll = true;
move(options.speedup);
});
right.mousedown(function() {
scroll = true;
move(-options.speedup);
});
left.mouseup(function() {
scroll = false;
});
right.mouseup(function() {
scroll = false;
});
}
Default.aspx