当前位置：文江博客话题详情

html中设置某个区域手动上下滚动

发布于 2022-09-30 12:05:37 字数 10774 浏览 19 评论 0

转：与您分享我的快乐 ---笨笨

html中设置某个区域手动上下滚动

1.这是效果图：

1.jpg (7.15 KB, 下载次数: 18)

下载附件

2011-04-08 10:43 上传

2.代码实现

<!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代码实现该功能的，试着尝试一下吧。)

分享到QQ

分享到微博