JS横向的左右滚动，响应鼠标向左或向右

发布时间：2018-08-20 04:26 所属栏目：121 来源：站长网

导读：Java Script 横向的左右滚动，为了节省时间，没有添加图片，在两侧分别有向左和向右的按钮，响应鼠标，当鼠标指向（无需点击）时，即可向左或向右滚动。当然，如果你想用在自己的网页上，可以将里面的文字替换为图片即可，整体效果还是不错的。特效演示：

　　JavaScript 横向的左右滚动，为了节省时间，没有添加图片，在两侧分别有向左和向右的按钮，响应鼠标，当鼠标指向（无需点击）时，即可向左或向右滚动。当然，如果你想用在自己的网页上，可以将里面的文字替换为图片即可，整体效果还是不错的。

　　特效演示：

<!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://www.veryhuo.com/uploads/allimg/1010/bank_btn_left.gif" alt="向左移动" onclick="moverscroll('test','right');" onmouseout="clearInterval(scrolltime_right)" onmouseover="scrooll_cx_right('test')" /> </div> <div class="first_sidebar2"> <div style="float:left"><img src="http://www.veryhuo.com/uploads/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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）