Javascript模拟scroll滚动效果脚本- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Javascript模拟scroll滚动效果脚本

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

Javascript模拟scroll滚动效果脚本

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 145 ::

收藏到网摘: n/a

js点击出现场层层外点击层消失的代码 javascript各种复制代码收集

项目需要写了一段模拟Scroll滚动代码，分享的同时，我有些疑问，希望大家能帮忙解决，代码如下

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
var oEventUtil = new Object();
oEventUtil.addEventHandler = function (oTarget,sType,fnDo){ if(oTarget.addEventListener){ oTarget.addEventListener(sType,fnDo,false) } if(oTarget.attachEvent){ oTarget.attachEvent("on"+sType,fnDo) } else{ oTarget["on"+sType] = fnDo; }
}
oEventUtil.removeEventHandler = function (oTarget,sType,fnDo){ if(oTarget.removeEventListener){ oTarget.removeEventListener(sType,fnDo,false) } if(oTarget.detachEvent){ oTarget.detachEvent("on"+sType,fnDo) } else{ oTarget["on"+sType] = null; }
}
oEventUtil.getEvent = function() {
if (window.event) {
return this.formatEvent(window.event);
} else {
return oEventUtil.getEvent.caller.arguments[0];
}
}
oEventUtil.formatEvent = function (oEvent)
{
oEvent.pageY = oEvent.clientY + document.body.scrollTop;
return oEvent;
}
function areaScroll(){ var scroll_hand_top = parseInt(scrollup.offsetHeight);
var scroll_hand_bottom = parseInt(category_list.offsetHeight) - parseInt(scrolldown.offsetHeight) - parseInt(scroll_hand.offsetHeight); category_list.scrollTop = (parseInt(category_list.scrollHeight)-parseInt(category_list.offsetHeight) + parseInt(scrollup.offsetHeight))*(parseInt(scroll_hand.style.top)-parseInt(scrollup.offsetHeight))/(parseInt(scroll_hand_bottom)-parseInt(scrollup.offsetHeight))-parseInt(scrollup.offsetHeight);
}
function clickNarrowup(){
var oEvent = oEventUtil.getEvent(); var scroll_hand_top = parseInt(scrollup.offsetHeight); var scroll_hand_bottom = parseInt(category_list.offsetHeight) - parseInt(scrolldown.offsetHeight) - parseInt(scroll_hand.offsetHeight); if(parseInt(scroll_hand.offsetTop) <= parseInt(scroll_hand_bottom) && parseInt(scroll_hand.offsetTop) >= parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(scroll_hand.offsetTop) - 10 +"px"; if(parseInt(scroll_hand.style.top) >= parseInt(scroll_hand_bottom)){ scroll_hand.style.top = parseInt(scroll_hand_bottom)+"px"; } if(parseInt(scroll_hand.style.top)<=parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(scroll_hand_top)+"px"; } areaScroll(); }
}
function clickNarrowdown(){
var oEvent = oEventUtil.getEvent(); var scroll_hand_top = parseInt(scrollup.offsetHeight);
var scroll_hand_bottom = parseInt(category_list.offsetHeight) - parseInt(scrolldown.offsetHeight) - parseInt(scroll_hand.offsetHeight); if(parseInt(scroll_hand.offsetTop) <= parseInt(scroll_hand_bottom) && parseInt(scroll_hand.offsetTop) >= parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(scroll_hand.offsetTop) + 10 +"px"; if(parseInt(scroll_hand.style.top) > parseInt(scroll_hand_bottom)){ scroll_hand.style.top = parseInt(scroll_hand_bottom)+"px"; } if(parseInt(scroll_hand.style.top)<parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(scroll_hand_top)+"px"; } areaScroll(); }
}
function mousedown(e){
var oEvent = oEventUtil.getEvent();
y = parseInt(oEvent.pageY) - parseInt(scroll_hand.offsetTop);
oEventUtil.addEventHandler(scroll_hand, "mousemove", mousemove);
oEventUtil.addEventHandler(scroll_hand, "mouseup", mouseup);
oEventUtil.addEventHandler(scroll_hand, "mouseout", mouseout);
}
function mousemove(e){ var oEvent = oEventUtil.getEvent(); var scroll_hand_top = parseInt(scrollup.offsetHeight); var scroll_hand_bottom = parseInt(category_list.offsetHeight) - parseInt(scrolldown.offsetHeight) - parseInt(scroll_hand.offsetHeight); if(parseInt(scroll_hand.offsetTop) <= parseInt(scroll_hand_bottom) && parseInt(scroll_hand.offsetTop) >= parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(oEvent.pageY) - y + "px"; if(parseInt(scroll_hand.style.top) > parseInt(scroll_hand_bottom)){ scroll_hand.style.top = parseInt(scroll_hand_bottom)+"px"; } if(parseInt(scroll_hand.style.top)<parseInt(scroll_hand_top)){ scroll_hand.style.top = parseInt(scroll_hand_top)+"px"; } areaScroll(); }
}
function mouseup(e){ oEventUtil.removeEventHandler(scroll_hand,"mousemove",mousemove); oEventUtil.removeEventHandler(scroll_hand,"mouseup",mouseup);
}
function mouseout(e){ oEventUtil.removeEventHandler(scroll_hand,"mousemove",mousemove); oEventUtil.removeEventHandler(scroll_hand,"mouseout",mouseout);
}
function displayScrollbar(){ if(category_list.scrollHeight > category_list.offsetHeight){ category_scroll.style.display="block"; } else{category_scroll.style.display="none";}
}
window.onload = function () {
//var category_scroll = document.getElementById("category_scroll"); //var scroll_hand = document.getElementById("scroll_hand"); //var scrollup = document.getElementById("scrollup"); //var scrolldown = document.getElementById("scrolldown"); //var category_list = document.getElementById("category_list");
category_list.scrollTop = 0;
displayScrollbar();
oEventUtil.addEventHandler(scroll_hand,"mousedown",mousedown); oEventUtil.addEventHandler(scrollup,"click",clickNarrowup); oEventUtil.addEventHandler(scrolldown,"click",clickNarrowdown);
}
</script>
<style type="text/css">
.category_list{width:200px;border:solid 1px #666666;height:300px;position:relative;}
#category_list{list-style:none;margin:0;padding:0;padding-left:20px;overflow:hidden;height:298px;}
#category_scroll{height:298px;width:15px;border:green solid 1px;position:absolute;right:0;top:0;font-size:12px;cursor:hand;}
#scrollup{height:15px;width:15px;border:green solid 1px;}
#scroll_hand{height:100px;width:15px;border:green solid 1px;position:absolute;}
#scrolldown{height:15px;width:15px;border:green solid 1px;position:absolute;bottom:0;}
</style>
</head>
<body>
<div class="category_list">
<ul id="category_list"> <li>1something</li> <li>2something</li> <li>3something</li> <li>4something</li> <li>5something</li> <li>6something</li> <li>7something</li> <li>8something</li> <li>9something</li> <li>10something</li> <li>11something</li> <li>12something</li> <li>13something</li> <li>14something</li> <li>15something</li> <li>16something</li> <li>17something</li> <li>18something</li> <li>19something</li> <li>20something</li> <li>21something</li> <li>22something</li> <li>23something</li> <li>24something</li> <li>25something</li> <li>26something</li> <li>27something</li> <li>28something</li> <li>29something</li> <li>30something</li>
</ul>
<div id="category_scroll"> <div id="scrollup">上
<BR>1、键盘事件应加给window统一调配，根据category_hand激发状态判别处理。 <BR>2、放进function里，等页面加载完了再执行。<BR>1、“键盘事件应加给window统一调配，根据category_hand激发状态判别处理”就是实现你这句话的策略：<BR>“当点中滚动条后，触发键盘的上下键，来控制上下滚动”<BR>category_hand被click时，将某个变量设为1,表示它被激活了。当网页内再发生鼠标按键事件时，解除激活。 <BR>某函数响应window对象的键盘事件，如果键盘事件发生时category_hand处于激活状态则执行相关代码。 <br>2、获取页面元素对象，现在大家一般都用$()函数： <BR><div class="codetitle"><span style="CURSOR: pointer" onclick="doCopy(code68389)"><U>复制代码</U></a></span> 代码如下:</div><div class="codebody" id="code68389"><BR>function $(id) { <BR>return document.getElementById(id); <BR>}<BR></div> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/10965/p/71/" title="js点击出现场层层外点击层消失的代码">js点击出现场层层外点击层消失的代码</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/10967/p/71/" title="javascript各种复制代码收集">javascript各种复制代码收集</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '10966'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('10966')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？