'web/javascript'에 해당하는 글 3건

먼저 html


 <div class="content">
<div class="overflow-x" id="overflow-x">
국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.국가원로자문회의의 의장은 직전대통령이 된다. 다만, 직전대통령이 없을 때에는 대통령이 지명한다. 모든 국민은 법률이 정하는 바에 의하여 납세의 의무를 진다.

탄핵소추의 의결을 받은 자는 탄핵심판이 있을 때까지 그 권한행사가 정지된다. 모든 국민은 헌법과 법률이 정한 법관에 의하여 법률에 의한 재판을 받을 권리를 가진다.

</div>
</div>


css


.content{
width: 700px;
}

.overflow-x{
width:420px;
height:170px;
border:1px solid red;
white-space:nowrap;
overflow-x:scroll;
}


js




window.onload = function () {

$.fn.horizontalmouse = function () {
var select_dom = document.getElementById(this.selector.replace("#", ""));

if (select_dom.addEventListener) {
select_dom.addEventListener("mousewheel", MouseWheelHandler, false);
select_dom.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else select_dom.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

var e = window.event || e;
var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));

$(this).animate({
scrollLeft: '-=' + delta * 100
}, 10);

return false;
}
};

$(function () {
$("#overflow-x").horizontalmouse();
});
};


해당 id만 지정해 주면 마우스로 움직임( 이미지 캐러셀 같은곳에 쓰면 좋을듯..)

저작자 표시
신고

'web > javascript' 카테고리의 다른 글

overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret


map()함수는 배열의 각각의 원소에 함수를 적용하는것이라면 

reduce()함수는 배열의 각 배열들을 순서대로 함수를 적용하는것입니다. 


예를 들어 1~5까지의 배열이 있을때 합을 구하고 싶다면 다음과 같습니다.


[1, 2, 3, 4, 5].reduce( (x, y) => x+y, 0); // 15


위의 소스는 (((((0+1) + 2) + 3) + 4) +5) 와 같이 동작합니다. 

그렇습니다. 함수중에서 가장 피곤한!! 재귀함수와 비슷합니다.  (재귀함수는 수학식을 코딩하기에 알맞지만 디버깅과 소스 분석이 어려운 단점이 있지요.)

일명 fold 함수라고도 하는 고차함수입니다.

reduce도 고차함수에 속하는 것으로 아래와 같이 움직이게 됩니다. 



reduce에 의해 함수를 마치면  리턴은 하나가 됩니다.  (map()은 리스트가 반환됩니다.)




아래는 리스트의 모든 데이터를 하나의 스트링으로 만드는 소스 입니다. 


function appendCurrent (previousValue, currentValue) {
return previousValue + "::" + currentValue;
}
var elements = ["abc", "def", 123, 456];
var result = elements.reduce(appendCurrent);
console.log(result); // "abc::def::123::456"


reduce()는 보통 리스트내의 계산 부분(통계 / 합) 부분에 많이 쓰입니다~

저작자 표시
신고

'web > javascript' 카테고리의 다른 글

overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret

javascrpt map

web/javascript 2016.06.09 13:24

map 메서드(Array)

map 함수는 배열의 각 요소에 대해 정의된 콜백 함수를 호출하고 결과가 포함되어 있는 배열을 반환합니다.

1. 배열의 각요소에 루트값을 구하기

let list = [2, 4, 5];
console.log(list.map(Math.sqrt)); // [1.4142135, 2, 2.23606]


2.  배열의 각 요소를 제곱근으로 하기

var numbers1 = list.map(function(num){
return num * num
});
console.log(numbers1); //[4, 16, 25]

 

2-1  배열의 각 요소를 제곱근으로 하기(함수 사용)

map()에 해당 함수만 표기해 주면 됩니다.


const square = x => x * x;
var numbers2 = list.map(square);
console.log(numbers2); //[4, 16, 25]



3.  오프젝트 배열를 키/값으로 다시 재성립



var kvArray = [{key:1, value:10}, {key:2, value:20}, {key:3, value: 30}];
var reformattedArray = kvArray.map(function(obj){
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
});


console.log(reformattedArray[0]['1']); //10
console.log(kvArray[0]['value']); //10



4.  문자열 리버스~


[].map.call('hello', x => x).reverse().join('') //"olleh"


저작자 표시
신고

'web > javascript' 카테고리의 다른 글

overflow-x 된 DOM에서 마우스 휠로 좌우스크롤 움직이기  (0) 2016.06.29
javascript reduce  (0) 2016.06.10
javascrpt map  (0) 2016.06.09

WRITTEN BY
No.190
세계정복의 시작점

받은 트랙백이 없고 , 댓글이 없습니다.
secret