<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>横向的左右滚动，响应鼠标向左或向右</title>
<style type="text/css">
.first_container {
width: 100%;
text-align: left;
}
.first_sidebar1 {
float: left; width: 2em;padding-top: 8px;
}
.first_sidebar2 {
float: right; width: 90px;padding-top: 8px;
}
.first_top_menu_div {
margin: 0 90px 0 2em;padding-top: 3px ;
height:63px;overflow:hidden;white-space:nowrap;
}
.topMenu_ico,.topMenu_txt{text-align:center;width:90px;;white-space: nowrap; overflow:hidden;}
.topMenu_ico img{margin-bottom:1px;margin-top:1px; border:none;}
.first_top_menu_div ul{margin:0px;padding:0px;}
.first_top_menu_div ul li {
font-size:9pt;
width: 90px;
min-height: 45px;
border: 1px solid #8FAAB6;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 1px;
padding:0px;
zoom: 1;
*display: inline;
_height: 45px;
}
</style>
<script language="javascript">
function moverscroll(obj,l_r){
if(l_r == "left"){
document.getElementById(obj).scrollLeft = document.getElementById(obj).scrollLeft + 90;}
else{
document.getElementById(obj).scrollLeft = document.getElementById(obj).scrollLeft - 90;}
}
function moverscroll_hover(obj,l_r){
if(l_r == "left"){
document.getElementById(obj).scrollLeft = document.getElementById(obj).scrollLeft + 60;}
else{
document.getElementById(obj).scrollLeft = document.getElementById(obj).scrollLeft - 60;}
}
function scrooll_cx_left(obj){
scrolltime_left=setInterval(function(){moverscroll_hover(obj,'left')},100);
}
function scrooll_cx_right(obj){
scrolltime_right=setInterval(function(){moverscroll_hover(obj,'right')},100);
}
</script>
</head>
<body>
<div class="first_container" id="first_container">
<div class="first_sidebar1">
<img src="http://pic.veryhuo.com/allimg/1010/bank_btn_left.gif" alt="向左移动" onclick="moverscroll('test','right');" onmouseout="clearInterval(scrolltime_right)" onmouseover="scrooll_cx_right('test')" />
<!-- end #first_sidebar1 --></div>
<div class="first_sidebar2">
<div style="float:left"><img src="http://pic.veryhuo.com/allimg/1010/bank_btn_right.gif" alt="向右移动" onclick="moverscroll('test','left');" onmouseout="clearInterval(scrolltime_left)" onmouseover="scrooll_cx_left('test')"/></div>
</div>
<div class="first_top_menu_div" id="test">
<ul>
<li> <a style="cursor:pointer">
<div class="topMenu_txt">1</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">2</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">3</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">4</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">5</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">6</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">7</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">8</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">9</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">10</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">11</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">12</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">13</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">14</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">15</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">15</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">16</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">17</div>
</a> </li>
<li> <a href="#" style="cursor:pointer">
<div class="topMenu_txt">18</div>
</a> </li>
</ul>
<div style="clear:right;"></div>
</div>
<br class="clearfloat" />
</div>
</body>
</html>
浙公网安备 33010602011771号