"광주 문화예술 인문스토리 플랫폼"의 두 판 사이의 차이

2024년 5월 26일 (일) 01:25 판

1

2

3

4

5

6

7

@@ 3번째 줄: / 3번째 줄: @@
 <html>
-<div id="fullpage">
+   <div class="boxwrap">
-	<div class="section" style="background:beige;"><p id="ppp_title" style="text-align:left;font-size:30px;        font-family: 'pyeonghwa' !important;">
+    <div class="box" style="background-color:red;">1</div>
-광주 문화예술 인문스토리 플랫폼은<br>
+    <div class="box" style="background-color:orange;">2</div>
-광주광역시에 산재한 문화예술자료와 근현대문화유적을 발견하고,<br>
+    <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>
-</p>
-</div>
+<script>
-	<div class="section">Some section</div>
+      window.onload = function () {
-	<div class="section">Some section</div>
+            var elm = ".box";
-	<div class="section">Some section</div>
+            $(elm).each(function (index) {
-</div>
+                // 개별적으로 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>
 <style>
 .col-md-6 iframe