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
JQuery左右滚动菜单特效页面代码引用片段：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JQuery左右滚动菜单特效</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script language="javascript" type="text/javascript" src="scrollable.js"></script>
<style type="text/css">
.scrollable-render{}
.button{cursor: hand;}
.button:hover > * {background-position: 0 -42px;}
.button_left{float: left; background: url(menu_out_left.gif) no-repeat 0 0; width: 4px; height: 26px;}
.button_center{float: left; background: url(menu_out_bj.gif) repeat-x 0 0; width: 80px; text-align: center}
.button_right{float: left; background: url(menu_out_right.gif) no-repeat 0 0; width: 4px; height: 26px;}
.ui-scrollable{width: 800px; height: 29px;}
.ui-scrollable-container{float: left; width: 780px; height: inherit; position: relative; overflow: hidden; border-bottom: 1px solid #DDDDDD;}
.ui-scrollable-content{float: left; width: 1770px; height: inherit;}
.ui-scrollable-left{float: left; background: url(scrollable_left_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
.ui-scrollable-right{float: left; background: url(scrollable_right_out.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
.ui-scrollable-left:hover{ float: left; background: url(scrollable_left_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
.ui-scrollable-right:hover{float: left; background: url(scrollable_right_on.gif) no-repeat 0 0; width: 10px; height:29px; cursor: hand;}
</style>
<script type="text/javascript">
$(function() {
scrollable('#scrollable_content', '#scrollable_render', { }, function(originalPosition, newPosition) {
return true;
});
});
</script>
</head>
<body>
<center>
<div id="scrollable_render" class="scrollable-render"></div>
<div id="scrollable_content" class="ui-scrollable-content">
