html中设置某个区域自动上下滚动
1.这是运行效果:
向上(请把鼠标移到这里)
向下(请把鼠标移到这里)
2.代码实现
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | <!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" > ul,li{margin:0;padding:0;} ul li{ line-height:25px;} #mybox{ overflow:hidden; background: #CCC; height:100px; width:200px; } .up ,.down{ background: #63F;width:200px;} </style> <script type= "text/javascript" src= "jquery-1.3.2.min.js" ></script> <script type= "text/javascript" > var myTimer; var speed=200; //速度毫秒 值越小速度越快 var stepSpeed=4; //值越大越快 $( function (){ var mybox=$( "#mybox" ); //向上 $( ".up" ).bind( "mouseover" , function (){ var nowPos=mybox[0].scrollTop; //当前值 changePos(mybox,nowPos,0); }).bind( "mouseout" , function (){ if (myTimer){window.clearInterval(myTimer);} }); //向下 $( ".down" ).bind( "mouseover" , function (){ var nowPos=mybox[0].scrollTop; //当前值 var maxPos=mybox[0].scrollHeight - mybox.outerHeight(); //最大值 changePos(mybox,nowPos,maxPos); }).bind( "mouseout" , function (){ if (myTimer){window.clearInterval(myTimer);} }); }); function changePos(box,from,to){ if (myTimer){window.clearInterval(myTimer);} var temStepSpeed=stepSpeed; if (from>to){ myTimer=window.setInterval( function (){ if (box[0].scrollTop>to){box[0].scrollTop-=(5+temStepSpeed);temStepSpeed+=temStepSpeed;} else {window.clearInterval(myTimer);} },speed); } else if (from < to){ myTimer=window.setInterval( function (){ if (box[0].scrollTop<to){box[0].scrollTop+=(5+temStepSpeed);temStepSpeed+=temStepSpeed;} else {window.clearInterval(myTimer);} },speed); } } </script> </head> <body> <div class = "up" >向上</div> <div id= "mybox" > <ul> <li>0test</li><li>1test</li><li>2test</li><li>3test</li><li>4test</li><li>5test</li><li>6test</li><li>7test</li><li>8test</li><li>9test</li><li>10test</li><li>11test</li><li>12test</li><li>13test</li><li>14test</li><li>15test</li><li>16test</li><li>17test</li><li>18test</li><li>19test</li><li>20test</li><li>21test</li><li>22test</li><li>23test</li><li>24test</li><li>25test</li><li>26test</li><li>27test</li><li>28test</li><li>29test</li><li>30test</li><li>31test</li><li>32test</li><li>33test</li><li>34test</li><li>35test</li><li>36test</li><li>37test</li><li>38test</li><li>39test</li><li>40test</li><li>41test</li><li>42test</li><li>43test</li><li>44test</li><li>45test</li><li>46test</li><li>47test</li><li>48test</li><li>49test</li><li>50test</li><li>51test</li><li>52test</li><li>53test</li><li>54test</li><li>55test</li><li>56test</li><li>57test</li><li>58test</li><li>59test</li><li>60test</li><li>61test</li><li>62test</li><li>63test</li><li>64test</li><li>65test</li><li>66test</li><li>67test</li><li>68test</li><li>69test</li><li>70test</li><li>71test</li><li>72test</li><li>73test</li><li>74test</li><li>75test</li><li>76test</li><li>77test</li><li>78test</li><li>79test</li><li>80test</li><li>81test</li><li>82test</li><li>83test</li><li>84test</li><li>85test</li><li>86test</li><li>87test</li><li>88test</li><li>89test</li><li>90test</li><li>91test</li><li>92test</li><li>93test</li><li>94test</li><li>95test</li><li>96test</li><li>97test</li><li>98test</li><li>99test</li> </ul> </div> <div class = "down" >向下</div> </body> </html> |
3.实现的主要思路
固定div的宽度和高度,设置CSS的overflow:hidden;然后使用js代码修改div的scrollTop值就可以实现滚动了。
4.可以依据这些实现的其它功能:
自动滚动,图片滚动等功能,这是上下滚动,左右滚动的实现应该也没有什么问题了吧。
5.注意:
代码中使用了jquery,要运行测试请引入jquery.(当然你也可以基本js代码实现该功能的,试着尝试一下吧。)
欢迎拍砖
本文为作者原创 转载请注明出处http://www.cnblogs.com/weirhp/archive/2011/04/08/2008956.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步