Heim > Artikel > Web-Frontend > Javascript模拟scroll滚动效果脚本第1/2页_javascript技巧
Javascript模拟scroll滚动效果脚本第1/2页_javascript技巧
- PHP中文网Original
- 2016-05-16 19:00:451110Durchsuche
代码
<!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">上</div>
<div id="scroll_hand">滚动滚动滚动</div>
<div id="scrolldown">下</div>
<script type="text/javascript">
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");
</script>
</div>
</div>
</body>
</html>现在有个问题就是当点中滚动条后，触发键盘的上下键，来控制上下滚动。然而，一般情况下，键盘事件似乎只针对Form表单对象和Winsow窗体对象起作用（除IE）,那么当创建事件处理函数时该怎们写呢？
oEventUtil.addEventHandler(category_hand,"keyup",test)，似乎是不行，毕竟category_hand代表的是一个DIV
test()函数如下：
function test(){
//alert("RUN");
var oEvent =
oEventUtil.getEvent();
if(oEvent.keyCode==38){
alert("UP");
clickNarrowup();
}
if(oEvent.keyCode==40){
clickNarrowdown();
alert("DOWN");
}
}
请高手帮忙解答一下。
疑问二:这段代码中，在定义变量的时候我是在HTML中间插入的代码，用于获取对象，如果这段代码插入到window.onload函数中时，那么很有可能此时这些对象尚未加载，无法读取到而产生程序错误，那么问题就是，如果我想完全将：
5cd6e472395e766622bc5d31b556eb7a
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");
2cacc6d41bbb37262a98f745aa00fbf0
引入到93f0f5c25f18dab9d176bd4f6de5d30e之间怎们处理比较好呢？
blueidea版主给出的解决方法
1、键盘事件应加给window统一调配，根据category_hand激发状态判别处理。
2、放进function里，等页面加载完了再执行。
1、“键盘事件应加给window统一调配，根据category_hand激发状态判别处理”就是实现你这句话的策略：
“当点中滚动条后，触发键盘的上下键，来控制上下滚动”
category_hand被click时，将某个变量设为1,表示它被激活了。当网页内再发生鼠标按键事件时，解除激活。
某函数响应window对象的键盘事件，如果键盘事件发生时category_hand处于激活状态则执行相关代码。
2、获取页面元素对象，现在大家一般都用$()函数：
function $(id) {
return
document.getElementById(id);
}Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：javascript各种复制代码收集_javascript技巧Nächster Artikel：js抓人游戏_鼠标特效
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse