집 >웹 프론트엔드 >JS 튜토리얼 >Javascript는 스크롤 스크롤 효과 스크립트 페이지 1/2_javascript 기술을 시뮬레이션합니다.

Javascript는 스크롤 스크롤 효과 스크립트 페이지 1/2_javascript 기술을 시뮬레이션합니다.

PHP中文网원래의: 2016-05-16 19:00:451150검색

코드

<!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");
}
}
이 질문에 답할 수 있도록 도와주세요.

질문 2: 이 코드에서는 변수를 정의할 때 객체를 얻기 위해 HTML 중간에 코드를 삽입했는데, 이 코드가 window.onload 함수에 삽입된다면 그럴 가능성이 매우 높습니다. 현재 이러한 개체는 로드되지 않았으며 읽을 수 없으며 프로그램 오류가 발생합니다.
4ec11beb6c39d0703d1751d203c17053
var 카테고리_스크롤 = 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. 통합 배포를 위해서는 키보드 이벤트를 창에 추가하고 카테고리_손 활성화 상태에 따라 처리해야 합니다.
2. 함수에 넣고 페이지가 로드될 때까지 기다린 후 실행하세요.
1. "통합 배포를 위해 창에 키보드 이벤트를 추가하고 카테고리_손 활성화 상태에 따라 처리해야 합니다."라는 문장을 구현하는 전략입니다.
"스크롤 막대를 클릭하면 위로 및 키보드의 아래쪽 키를 사용하여 스크롤 위아래로 제어할 수 있습니다.”
category_hand를 클릭하면 변수가 1로 설정되어 활성화되었음을 나타냅니다. 웹 페이지에서 또 다른 마우스 버튼 이벤트가 발생하면 비활성화됩니다.
윈도우 객체의 키보드 이벤트에 응답하는 함수입니다. 키보드 이벤트 발생 시 Category_hand가 활성화되면 해당 코드가 실행됩니다.

2. 페이지 요소 개체를 가져옵니다. 이제 모든 사람이 일반적으로 $() 함수를 사용합니다.

function $(id) { 
return 
document.getElementById(id); 
}

성명：

이전 기사：다양한 자바스크립트 복사코드_자바스크립트 스킬 모음다음 기사：다양한 자바스크립트 복사코드_자바스크립트 스킬 모음

Javascript는 스크롤 스크롤 효과 스크립트 페이지 1/2_javascript 기술을 시뮬레이션합니다.

관련 기사