<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery MouseWheel 응용</title>
<style>
/*부드러운 스크롤 이동
html { scroll-behavior: smooth;}
*/
body{ margin:0; padding:0;}
header{ position:absolute; width:100%; height:100px; border-bottom:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section{ width:100%; height:100vh; display:flex; justify-content: center; align-items: center; float:left;}
footer{ width:100%; height:300px; border-top:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section:nth-child(odd){ background-color:#f1f1f1;}
.main1{ display:inline-block; height:1400px;}
.main4{ display:inline-block; height:800px;}
.main4 h2{ width:100%;}
#main4_sub{ width:100%; overflow:hidden; display:inline-block;}
#main4_sub[data-box='0'] .main4-box{ margin-left:0;}
#main4_sub[data-box='1'] .main4-box{ margin-left:-600px;}
#main4_sub[data-box='2'] .main4-box{ margin-left:-1200px;}
#main4_sub[data-box='3'] .main4-box{ margin-left:-1800px;}
#main4_sub[data-box='4'] .main4-box{ margin-left:-2400px;}
/*
#main4_sub[data-box='5'] .main4-box{ margin-left:-3000px;}
#main4_sub[data-box='6'] .main4-box{ margin-left:-3600px;}
*/
.main4-box{ display:flex; width:4200px; transition-duration:0.3s;}
.main4-box > div{ width:600px; display:flex; justify-content: center; align-items: center; height:600px; }
.main4-box > div:nth-child(odd){ background-color:#fff1f1;}
.main4-box > div:nth-child(even){ background-color:#f1fff1;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 스크롤 중복입력 방지용 flag
var scrollworker = false;
// 스크롤 구간 배열
var scrollTops = [];
// 기본 이동시간 0.8초
var basicinterval = 800;
// 페이지 로드 후 동작
$(function(){
// scrollTops 구간목록을 배열로 구성
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
// scrollTops 내임차순 정렬
scrollTops.sort(function(a, b) { return a - b;});
// 마지막 scrollTops 을 넘겨줄 위치를 구하기 위해
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
// header, section, footer 에서 마우스 휠을 넣었을 경우
$("header, section, footer").on("mousewheel", function (e) {
// 기존 이벤트 취소
e.preventDefault();
// 중복 입력 방지
if(scrollworker==false){
// 중복 입력 방지 on
scrollworker = true;
// 동작하고 있는 엘리먼트
const elm = $(this);
// 휠이벤트가 undefined 가 아니라면
if(event.wheelDelta!=undefined){
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
// 지금의 스크롤탑 위치
const nst = $(window).scrollTop();
// 어디로 움직일 것인가
var moveTop;
if($(elm).hasClass("main1")){ // main1 스크롤 이동 패스
// 연속 입력위해 scrollworker 지정
scrollworker = false;
if(delta < 0){ // 아래로
moveTop = "+=50";
}else if(delta>0){ // 휠위로
moveTop = "-=50";
}
// main1에선 기본 스크롤
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 5,easing: "swing", complete: function () {
scrollworker = false;
}
});
return;
}else if($(elm).hasClass("main4")){ // main4 일 경우 조건 수행후 이어 동작시키기
// 조건을 수행시키기 위해 boxno 을 지정
var boxno = Number($("#main4_sub").attr("data-box"));
// 조건을 만족하는지에 대한 상태 flag
var movestat = false;
if(delta < 0){ // 아래로
boxno++;
// 조건값이 main4-box 의 수를 넘어가게 되면
if(boxno > $(".main4-box").length + 3){
boxno--;
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
// 조건상태 만족처리
movestat = true;
}
}else if(delta>0){ // 휠위로
boxno--;
// 조건값이 최소라면
if(boxno < 0){
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
movestat = true;
}
}
// 변경된 조건으로 스타일 적용
$("#main4_sub").attr("data-box",boxno);
// 조건에 따라 scrollTop을 지정하기 위해 변수지정
var intervals = basicinterval;
// 조건에 만족하지 않으면 움직임이 없도록 고정시킴
if(!movestat) { intervals=0; moveTop=$(".main4").offset().top;}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: intervals,easing: "swing", complete: function () {
scrollworker = false;
}
});
}else{ // 그외일경우 일반적 진행
if(delta < 0){ // 아래로
// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
moveTop = scrollTops.filter(x=> x > nst)[0];
// 값이 없으면 마지막값으로 지정
if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
}else if(delta>0){ // 휠위로
// 지금의 scrollTop 위치보다 작은 값 추출
var nstminArr = scrollTops.filter(x => x < nst);
// 역순정렬
nstminArr.sort(function(a, b) { return b - a;});
// 역순정렬한 첫번째값 추출
moveTop = nstminArr[0];
// 첫번째값이 undefined 면 움직일 위치 0으로 지정
if(moveTop == undefined) moveTop = 0;
}
// scrollTop 이동
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: basicinterval,easing: "swing", complete: function () {
scrollworker = false;
}
});
}
}
}
});
});
$(window).resize(function(){
scrollTops = [];
$("section").each(function(index, element) {
if($(this).offset().top!=undefined){
scrollTops.push($(this).offset().top)
}
});
scrollTops.sort(function(a, b) { return a - b;});
scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
});
</script>
</head>
<body>
<header>
<h1>Header</h1>
</header>
<section class="main0">
<h2>Main 0</h2>
</section>
<section class="main1">
<h2>Main 1</h2>
</section>
<section class="main2">
<h2>Main 2</h2>
</section>
<section class="main3">
<h2>Main 3</h2>
</section>
<section class="main4">
<div>
<h2>Main 4</h2>
<div id="main4_sub" data-box="0">
<div class="main4-box">
<div class="main4-box-1">4-1</div>
<div class="main4-box-2">4-2</div>
<div class="main4-box-3">4-3</div>
<div class="main4-box-4">4-4</div>
<div class="main4-box-5">4-5</div>
<div class="main4-box-6">4-6</div>
<div class="main4-box-7">4-7</div>
</div>
</div>
</div>
</section>
<footer>
<h1>Footer</h1>
</footer>
</body>
</html>
22. 8. 4.
Jquery 한화면 단위 Mouse Wheel 이동 (응용)
JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
21. 7. 26.
제이쿼리(Jquery) 탭메뉴(Tab Menu)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function () {
$(".tabbtn").on("click", function () {
var index = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$(".tablist").removeClass("active").eq(index).addClass("active");
});
});
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
Javascript 버전
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Tab 메뉴</title>
<script>
window.onload = function () {
var btns = document.querySelectorAll(".tabbtn");
for (var i = 0; i < btns.length; i++) {
btns[i].setAttribute("onclick", "btnClick(" + i + ");");
}
}
function btnClick(index) {
var tabbtn = document.getElementsByClassName("tabbtn");
var tablist = document.getElementsByClassName("tablist");
for (var i = 0; i < tabbtn.length; i++) {
if (index == i) {
tabbtn[i].className = "tabbtn active";
tablist[i].className = "tablist active";
} else {
tabbtn[i].className = "tabbtn";
tablist[i].className = "tablist";
}
}
}
</script>
<style>
.tabnav{ width:100%; display:inline-block; float:left;}
.tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
.tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
.tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
.tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
.tab > .active{ padding:0.5em; display:block; min-height:300px;}
</style>
</head>
<body>
<nav class="tabnav">
<a class="tabbtn active">Tab1</a>
<a class="tabbtn">Tab2</a>
<a class="tabbtn">Tab3</a>
</nav>
<ul class="tab">
<li class="tablist active">
Tab1 Content
</li>
<li class="tablist">
Tab2 Content
</li>
<li class="tablist">
Tab3 Content
</li>
</ul>
</body>
</html>
20. 9. 9.
Jquery Layer Popup(Drag & Drop)
은근히 쓰게되는 제이쿼리 레이어팝업...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>레이어 팝업</title>
<style>
/* Layer 팝업 css */
.LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
.LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
.LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
.LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
.LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
</style>
<script>
/* Popup */
var PopupmoveX = 0;
var PopupmoveY = 0;
var topPopup = 0;
var leftPopup = 0;
function zIndexReload(ele) {
$(ele).css("z-index", 1000).siblings().css("z-index", 999);
}
function Popupdrag(ev) {
if ($(ev.target).offset() != undefined) {
topPopup = ev.clientY - $(ev.target).offset().top;
leftPopup = ev.clientX - $(ev.target).offset().left;
}
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
}
function Popupdrop(ev) {
PopupmoveX = ev.clientX;
PopupmoveY = ev.clientY;
$(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
}
function setCookie(name, value, expiredays) {
var todayDate = new Date();
todayDate.setDate(todayDate.getDate() + expiredays);
//todayDate.getDate()- localtime의 달의 날짜를 반환(1~31). setDate의경우 달의 날짜를 설정
document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
}
function getCookie(name) {
var nameOfCookie = name + '=';
var x = 0;
while (x <= document.cookie.length) {
var y = (x + nameOfCookie.length);
if (document.cookie.substring(x, y) == nameOfCookie) {
if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
endOfCookie = document.cookie.length;
return unescape(document.cookie.substring(y, endOfCookie));
}
x = document.cookie.indexOf(' ', x) + 1;
if (x == 0)
break;
}
return '';
}
// 오늘 하루 이창을 열지 않음
function PopupClose(elem) {
var elemName = $(elem).parents("table:first").attr("id");
setCookie(elemName, 'done', 1); // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
$(elem).parents("table:first").remove();
}
$(function () {
/* 목록만큼 돌린다 */
for (var i in popupArray) {
var mypopupName = popupArray[i].name;
var mypopupTop = popupArray[i].top;
var mypopupLeft = popupArray[i].left;
var mypopuphtml = popupArray[i].html;
/* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
if (getCookie(mypopupName) != "done") {
var popuptbl = document.createElement("table");
popuptbl.setAttribute("class", "LayerPopupTbl");
popuptbl.setAttribute("id", mypopupName);
popuptbl.setAttribute("draggable", true);
popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
popuptbl.setAttribute("ondragend", "Popupdrop(event)");
popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
popuptbl.style.top = mypopupTop;
popuptbl.style.left = mypopupLeft;
var formhtml = [];
formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
popuptbl.innerHTML = formhtml.join("");
document.body.appendChild(popuptbl);
}
}
});
/* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성... */
var popupArray = [
/* 팝업1 */
{ "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
/* 팝업2 */
{ "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
/* 팝업3 */
{ "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
]
</script>
</head>
<body>
</body>
</html>
20. 8. 10.
Javascript 링크이동없이 URL 바꾸기
참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState
p.html
page.html
p.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style>
a {
background-color: #000;
color: #fff;
margin: 2px;
cursor: pointer;
}
</style>
<script>
window.onload = function () {
document.getElementById("btn1").addEventListener("click", function () {
var page = 1;
var state = { 'page_id': page, 'user_id': "" }
var title = ''
var url = 'page.html?page=' + page;
history.pushState(state, title, url);
// Javascript
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
alert('XMLHTTP Fail');
return false;
}
httpRequest.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE) {
if (this.status === 200) {
document.getElementById("view").innerHTML = this.responseText;
} else {
alert('Error');
}
}
};
httpRequest.open('GET', url);
httpRequest.send();
});
document.getElementById("btn2").addEventListener("click", function () {
var page = 2;
var state = { 'page_id': page, 'user_id': "" }
var title = ''
var url = 'page.html?page=' + page;
history.pushState(state, title, url);
// JQuery
$.ajax({
type: "GET",
url: url,
success: function (res) {
$("#view").html(res);
}
});
});
}
</script>
</head>
<body>
<a id="btn1">Page 1</a>
<a id="btn2">Page 2</a>
<div id="view"></div>
</body>
</html>
page.html
Page 입니다
20. 6. 9.
Javascript & JQuery Rainbow Text Effect
Rainbow Text Animation
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title>JQuery Rainbow Animation</title>
<style>
.RainbowText{ text-align:center;}
.RainbowText > span{ font-size:30px; font-weight:900; animation-duration:1s; animation-iteration-count:infinite;}
</style>
<script>
// 색상목록
var rainbowArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
// 클래스명
var className = "RainbowText";
$(function () {
var html = [];
html.push("<style>");
// rainbowArr에 넣은 수만큼 클래스를 만든다.
for (var i = 0; i < rainbowArr.length; i++) {
// 클래스 선언
html.push(".rainbow" + i + "{color:" + rainbowArr[i] + ";animation-name:rainbow" + i + "Ani;}");
// 애니메이션 키프레임 선언
html.push("@keyframes rainbow" + i + "Ani{");
for (var j = i; j < i + rainbowArr.length + 1; j++) {
// 0% ~ 100% 가 등록한 배열순서대로 색상이 되도록 처리
html.push(((100 / rainbowArr.length) * (j - i)) + "%{color:" + rainbowArr[((j) % rainbowArr.length)] + "}");
}
html.push("}");
}
html.push("</style>");
// body 에 추가
$("body").append(html.join("\n"))
// 선언한 클래스에 html 을 치환
$("." + className).each(function () {
var str = $(this).text();
var html = [];
// text 수 만큼
for (var i = 0; i < str.length; i++) {
// span 으로 잘개쪼개고 클래스명을 지정
html.push("<span class=\"rainbow" + (i % rainbowArr.length) + "\">" + str.substring(i, i + 1) + "</span>");
}
// 클래스의 html태그를 변경
$(this).html(html.join(""));
});
});
</script>
</head>
<body>
<div class="RainbowText">Rainbow</div>
<div class="RainbowText">■■■■■■■</div>
</body>
</html>
19. 12. 13.
Javascript & JQuery 퀵 메뉴
간단하게 만들어본 제이쿼리 퀵메뉴
자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 스크롤을 만들기위해 body 를 키움 없애도 뎀
$(function () { $("html,body").css("height", "10000px");});
// 따라다니게 하기 위한 처리
$(window).scroll(function (e) {
$(".quick").css("top", $(this).scrollTop()+"px");
});
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
/* 스크롤바 박스 */
.quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
</style>
<script>
// 창크기 키워 스크롤 나오게 하기
window.onload = function () {
document.getElementsByTagName("body")[0].style.height = "10000px";
}
window.addEventListener('scroll', function (e) {
document.querySelector(".quick").style.top = window.scrollY + "px"
})
</script>
</head>
<body>
<div class="quick">
<div>
<ul>
<li><a>menu 1</a></li>
<li><a>menu 2</a></li>
<li><a>menu 3</a></li>
<li><a>menu 4</a></li>
<li><a>menu 5</a></li>
</ul>
</div>
</div>
</body>
</html>
16. 10. 24.
JQuery 한화면 단위 Mouse Wheel 이동
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollTop();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().top;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().top;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollTop: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
</body>
</html>
ie 일 경우 ie 6 이하의 브라우저에서 안됨 이때에는 head에<meta http-equiv="X-UA-Compatible" content="IE=edge">
를 넣어줘야한다
추가 (좌우)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>MouseWheel</title>
<style type="text/css">
html,body{ margin:0; padding:0; width:100%; height:100%;}
.boxwrap{ display: table; table-layout: fixed; width: 700%; height: 100%; table-layout: fixed;}
.box{ display: table-cell;position:relative; color:#ffffff; font-size:24pt;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var elm = ".box";
$(elm).each(function (index) {
// 개별적으로 Wheel 이벤트 적용
$(this).on("mousewheel DOMMouseScroll", function (e) {
e.preventDefault();
var delta = 0;
if (!event) event = window.event;
if (event.wheelDelta) {
delta = event.wheelDelta / 120;
if (window.opera) delta = -delta;
}
else if (event.detail)
delta = -event.detail / 3;
var moveTop = $(window).scrollLeft();
var elmSelecter = $(elm).eq(index);
// 마우스휠을 위에서 아래로
if (delta < 0) {
if ($(elmSelecter).next() != undefined) {
try{
moveTop = $(elmSelecter).next().offset().left;
}catch(e){}
}
// 마우스휠을 아래에서 위로
} else {
if ($(elmSelecter).prev() != undefined) {
try{
moveTop = $(elmSelecter).prev().offset().left;
}catch(e){}
}
}
// 화면 이동 0.8초(800)
$("html,body").stop().animate({
scrollLeft: moveTop + 'px'
}, {
duration: 800, complete: function () {
}
});
});
});
}
</script>
</head>
<body>
<div class="boxwrap">
<div class="box" style="background-color:red;">1</div>
<div class="box" style="background-color:orange;">2</div>
<div class="box" style="background-color:yellow;">3</div>
<div class="box" style="background-color:green;">4</div>
<div class="box" style="background-color:blue;">5</div>
<div class="box" style="background-color:indigo;">6</div>
<div class="box" style="background-color:violet;">7</div>
</div>
</body>
</html>
좀 복잡한 방법 : Jquery 한화면 단위 Mouse Wheel 이동 (응용)
피드 구독하기:
글 (Atom)