끄적끄적: 2022

22. 8. 4.

Jquery 한화면 단위 Mouse Wheel 이동 (응용)

JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

<!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. 7. 7.

C# 내 로컬 PC시간 NAVER 서버 시간으로 변경

using System;
using System.Globalization;
using System.Net;
using System.Runtime.InteropServices;
 
namespace timechange
{
    internal class Program
    {
        [StructLayout(LayoutKind.Sequential)]
        public struct SYSTEMTIME
        {
            public short wYear;
            public short wMonth;
            public short wDayOfWeek;
            public short wDay;
            public short wHour;
            public short wMinute;
            public short wSecond;
            public short wMilliseconds;
        }
 
        [DllImport("kernel32.dll", SetLastError = true)]
        public static extern bool SetSystemTime(ref SYSTEMTIME st);
 
        [DllImport("kernel32.dll", SetLastError = true)]
        public static extern bool SetLocalTime(ref SYSTEMTIME st);
 
        static void Main(string[] args)
        {
            DateTime dateTime = DateTime.MinValue;
            try
            {
                // 네이버 사이트 시간하고 맞춰서 시간 설정
                using (var response = WebRequest.Create("https://www.naver.com").GetResponse())
                    dateTime = DateTime.ParseExact(response.Headers["date"],
                        "ddd, dd MMM yyyy HH:mm:ss 'GMT'",
                        CultureInfo.InvariantCulture.DateTimeFormat,
                        DateTimeStyles.AssumeUniversal);
            }
            catch (Exception)
            {
                dateTime = DateTime.Now;
            }
            Console.WriteLine(dateTime);
 
            
            SYSTEMTIME st = new SYSTEMTIME();
            st.wYear = (short)dateTime.Year;
            st.wMonth = (short)dateTime.Month;
            st.wDay = (short)dateTime.Day;
            st.wHour = (short)dateTime.Hour;
            st.wMinute = (short)dateTime.Minute;
            st.wSecond = (short)dateTime.Second;
            st.wMilliseconds = (short)dateTime.Millisecond;
 
            SetSystemTime(ref st);
            SetLocalTime(ref st);
            Console.ReadKey();
        }
    }
}

22. 1. 19.

Javascript 동적 드래그 앤 드롭 레이어 생성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
    // 시작위치
    var startX = 0;
    var startY = 0;
    // 클릭위치
    var clickX = 0;
    var clickY = 0;
    // 맨앞으로
    var zIndex = 0;
 
    function DragStartFunction(ev,el) {
        if (el.style.left != undefined) {
            startX = el.style.left;
            startX = Number(startX.replace("px", ""));
        }
        if (el.style.top != undefined) {
            startY = el.style.top;
            startY = Number(startY.replace("px", ""));
        }
        clickX = ev.clientX - startX;
        clickY = ev.clientY - startY;
    }
    function DragEndFunction(ev) {
        var moveX = ev.clientX - clickX;
        var moveY = ev.clientY - clickY;
        ev.target.style.left = moveX + "px";
        ev.target.style.top = moveY + "px";
        zIndex++;
        ev.target.style.zIndex = zIndex;
    }
 
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var newDiv = document.createElement("div");
            newDiv.className = "formdiv";
            newDiv.setAttribute("draggable", true);
            newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
            newDiv.setAttribute("ondragend", "DragEndFunction(event)");
            // 구분을 위해 랜덤색상
            newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
            document.getElementById("content").appendChild(newDiv);
        }
    }
</script>
</head>
<body>
    <a id="btn">ADD</a>
    <div id="content"></div>
</body>
</html>

22. 1. 13.

웹페이지 페이지 이동(?) 갱신( Javascript History Api )

페이지 이동시 부드럽게 이동하기 위한 방법(=한페이지에서 변화를...)
Javascript 파일(/main.js)

// 뒤로가기시 페이지 새로고침
window.onpopstate = function(event) {
    var np = document.location
    BodyClassLoad(np);
}
// 페이지 시작시 a태그의 href 조정(타 도메인일경우 그대로 두고 같은 도메인일 경우 function 으로 처리되도록..)
window.onload = function(){
    var abtn = document.querySelectorAll("a");
    for(var i = 0; i < abtn.length; i++){
        const loc = abtn[i].getAttribute("href");
        if(loc.indexOf("://") == -1){
            MoveHrefClick(abtn[i],loc);
        }else{
            if(loc.indexOf("://"+window.location.origin) > -1){
                MoveHrefClick(abtn[i],loc);
            }
        }
    }
}
// body class 조정 및 section 의 내용 교체
function BodyClassLoad(url){
    var nc = "";
    var mhref = "";
    if(url.origin != undefined){
        nc = url.href.substring(url.origin.length,url.origin.length+url.href.length);
    }else{
        nc = url;
    }
    mhref = nc;
    if(nc.substring(0,1)=="/"){
        nc = nc.substring(1,nc.length);
    }
    if(nc.substring(nc.length-1,nc.length)=="/"){
        nc = nc.substring(0,nc.length - 1);
    }
    nc = nc.replace("/"," ");
    document.querySelector("body").className = "BodyTag "+ nc;
    var xhr = new XMLHttpRequest(); 
    var loadurl = mhref;
    if(loadurl.indexOf("?") == -1){
        loadurl += "/main.php";
        loadurl = loadurl .replace("//","/");
    }else{
        // PHP 페이지를 불러오도록 상황에 따라 변경
        loadurl = loadurl .replace("?","main.php?");
    }
    xhr.open('GET', loadurl, true); 
    xhr.send(); 
    xhr.onload = function(){ 
        if (xhr.status == 200) {
            document.querySelector("section").innerHTML = xhr.response;
        } else { 
        // 실패 
        } 
    }
}
// a태그 href 비활성화 및 history 에 이전주소로 기록
function MoveHrefClick(el,href){
    el.removeAttribute("href");
    el.onclick = function(){
        history.pushState({page: 1}, document.title, href);
        BodyClassLoad(href)
         
    }
}

PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...

<?php
    $relative_path = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
    $pathNode = explode( '/', $relative_path );
    $bodyClass = "BodyTag";
    for( $i = 0;$i < sizeof($pathNode); $i++){
        if($pathNode[$i] != ""){
            $bodyClass .= " ".$pathNode[$i];
        }
    }
    $path1 = "Order";
    $path2 = "";
    $path3 = "";
    if($bodyClass != "BodyTag"){
        if(sizeof($pathNode)>1){
            $path1 = $pathNode[1];
        }
        if(sizeof($pathNode)>2){
            $path2 = $pathNode[2];
        }
        if(sizeof($pathNode)>3){
            $path3 = $pathNode[3];
        }
    }else{
        $bodyClass .= " ".$path1;
    }
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/main.js" defer></script>
</head>
<body class="<?php echo $bodyClass; ?>">
<header><?php include $_SERVER["DOCUMENT_ROOT"]."/header.html"; ?></header>
<section><?php include $_SERVER["DOCUMENT_ROOT"].$relative_path."main.php"; ?></section>
<footer><?php include $_SERVER["DOCUMENT_ROOT"]."/footer.html"; ?></footer>
</body>
</html>

페이지구성(/header.html)

1 2	`<a` `href="/">Home</a>` `<a` `href="/A/">A</a>`

PHP 구성(/main.php)

1	`<h2>Home</h2>`

PHP 구성(/A/main.php)

1	`<h2>A</h2>`

끄적끄적