본문 바로가기
코리아 IT아카데미/Javascript·Jquery~~~

9일차 | 화면확대축소, kwicks 라이브러리 네비바, 마우스 휠, 나이스 스크롤, 니드팝업

by Sharon kim 2022. 3. 30.

 

index.html (화면확대 축소)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery.zoomooz.min.js"></script> 

<style>



</style>
</head>

<body>

<div id="container">

  <div id="head">
    
    <h1><a href="#">jQuery</a></h1>
 
  </div>
  <div id="navigation">
    <ul>
      <li id="lhome"><a href="#00">Home</a></li>
      <li id="labout"><a href="#03">About Us</a></li>
      <li id="lmission"><a href="#04">Mission</a></li>
      <li id="lsupport"><a href="#05">Support</a></li>
      <li id="lcontact"><a href="#06">Contact Us</a></li>
    </ul>
  </div>



  <div id="main">

    <div id="content_left">
      <div class ="article">
      <h3>Welcome Lorem ipsum dolor</h3>
      <p> <img id = "rot" src="images/img1.jpg" width="110" height="74" border="0" alt="" class="pic_right targetZooom" />"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
      </div>
      
      <div class ="article">
      <h3>Lorem ipsum dolor</h3>
      <img src="images/img2.jpg" width="110" height="74" border="0" alt="" class="pic_left targetZooom" />
      <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</p>
    </div>
    
    </div>

    
    <div id="content_right">
      <h4>Lorem ipsum dolor</h4>
       <div class="item">     
       <p><img  class="th_thum"  src="images/th1.jpg" width="50" height="50" border="0" alt=""/>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. <a href="#">view</a><br style="clear:both" /></p>      
      </div>

       <div class="item targetZooom">    
       <p><img class="th_thum" src="images/th2.jpg" width="50" height="50" border="0" alt="" />The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested <a href="#">view</a><br style="clear:both" /></p>
 
    </div>
       <div class="item">    
       <p><img class="th_thum" src="images/th3.jpg" width="50" height="50" border="0" alt=""  />quis nostrud exercitation ullamco laboris <a href="#">view</a><br style="clear:both" /> </p>
      
    </div>
       
       
     </div>
  <div id="footer">
  <p>(c) 2012 All Rights Reserved</p>
</div>
 
</div>



<script>

$(".targetZooom").click(function(e) {
			
    $(this).zoomTo({targetsize:0.7});
	e.stopPropagation();
	
});

	
$(window).click(function(e) {
	
    $("body").zoomTo();
	e.stopPropagation();	
			
});

</script>

</body>
</html>

style.css

body {
	background-color:  #BDA66C;
	margin: 0px;
	padding: 20px 0px;
	font: 11px Verdana, Geneva, sans-serif;
	color: #282828;	
}

/********************** LayOut **********************/

#container
{
	width: 750px;
	margin: 0 auto;
	padding: 0px;	
}

#main {	
	background-color: #F8FCFF;
	width: 750px;
	height: auto; 
}
#main #content_left {
float:left;
padding:0 30px 30px 30px;
width: 425px;
height:auto;
}
#main #content_right{
float:left;
padding:5px;
width: 220px;
height:auto;
}

#footer {
	clear: both;
	width: 750px;
	margin: 20px auto;
	padding: 10px 0;
	background-color: #99633F;
}

#footer p {
	margin: 0;
	padding: 0;
	text-transform: lowercase;
	text-align: center;
	color:#FFFFFF;
	
}


.item {

    border-bottom:1px #999999 dashed;
}


/********************** navi**********************/
#navigation ul
{
	padding: 0px;


	width: 750px;
	float: left;
	margin: 0 0 10px;
	list-style-type: none;
	background-color: #90BA2C;
}

#navigation li { float: left; }

#navigation a:link,
#navigation a:visited
{
	float: left;
	display: block;
	color: #ffffff;
	padding: 5px 10px;
	border-bottom-width: 0;
	text-decoration:none;
}

#navigation a:hover,
#navigation a:active
{
	color: #ffffff;
	background-color: #485573;
}

/**********************content**********************/
#head {
width: 750px;
margin : 0;
padding : 0;
height : 120px;
background : url(images/header.jpg) ;
border-bottom : 2px solid #fff;
}
#head h1 {
font-family:Tahoma; font-size:36px;  font-weight:bold; line-height:50px; margin:0px; padding:0px;
}
#head h1 a {
	color:#FFFFFF;
	display:block;
	text-decoration:none;
	padding:30px 0 0 30px;
}
#content_left p{
font-size:11px;
text-indent:1em;
text-align:justify;
line-height:18px;
}

img.pic_left{
float:left;
padding:5px;
margin:0 15px 8px 8px;
border:1px  #CCCCCC solid;
}

img.pic_right{
float:right;
padding:5px;
margin:0 8px 8px 15px;
border:1px  #CCCCCC solid;
}
.th_thum{
	float:right;
	padding:5px;
	margin:0 8px 8px 8px;
	border:1px  #CCCCCC solid;
}

h3{
font-size:14px;
color: #003366;
}
h4{
font-size:13px;
padding:12px;
margin:0px;
color: #003366;
border-bottom:1px #999999 dashed;
}

.article { margin-bottom:20px;}


#rot {  
    -webkit-transform: rotate(10deg)  translateX(10px); ;
    -moz-transform:rotate(10deg) translateX(10px);
}

kwicks 라이브러리를 활용한 네비게이션

 

세로

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>kwicks 네비게이션</title>
<style>
body {
	padding: 50px;
	font-family: "맑은 고딕";
	font-size: 0.9em;
	background: #1d1e21;
}
ul.kwicks {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.kwicks li {
	display: block;
	padding: 0;
	width: 125px;
	height: 100px;
	overflow: hidden;
	/* outline: 1px solid #09f; */
}
ul.kwicks.horizontal li {
	float: left;
	margin-right: 5px;
}
ul.kwicks.horizontal li.kwick_4 {
	margin-right: none;
}
ul.kwicks.vertical li {
	margin-bottom: 5px;
}
ul.kwicks.vertical li.kwick_4 {
	margin-bottom: none;
}
li {
	background: #09f;
}
li.kwick_1 {
	background: #53b388;
}
li.kwick_2 {
	background: #5a69a9;
}
li.kwick_3 {
	background: #c26468;
}
li.kwick_4 {
	background: #bf7cc7;
}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script>
$(function(){
	$(".kwicks").kwicks({
		max:300,
		spacing:5,
		isVertical:true,
		behavior:"menu",
		easing:"easeOutBounce"
	});

	$(대상).kwicks({
		
	})
});
</script>
</head>

<body>
<!--
horizontal navigation1
<ul class="kwicks horizontal">
	<li class="kwick_1">menu1</li>
	<li class="kwick_2">menu2</li>
	<li class="kwick_3">menu3</li>
	<li class="kwick_4">menu4</li>
</ul>
-->

<!--
horizontal navigation2
<ul class="kwicks horizontal">
	<li class="kwick_1">menu1</li>
	<li class="kwick_2">menu2</li>
	<li class="kwick_3">menu3</li>
	<li class="kwick_4">menu4</li>
	<li class="kwick_1">menu5</li>
	<li class="kwick_2">menu6</li>
	<li class="kwick_3">menu7</li>
	<li class="kwick_4">menu8</li>
</ul>
-->

<!-- vertical navigation -->
<ul class="kwicks vertical">
	<li class="kwick_1">menu1</li>
	<li class="kwick_2">menu2</li>
	<li class="kwick_3">menu3</li>
	<li class="kwick_4">menu4</li>
</ul>
</body>
</html>

 

1220_1.html(가로)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>kwicks 네비게이션</title>
<style>
body {
    margin: 0;
	padding: 0;
	font-family: "맑은 고딕";
	font-size: 0.9em;
}
ul,li{list-style: none;}

ul.nav{position: relative; margin: 0; padding: 0;}
ul.nav > li{ width: 20%; height: 300px;}
ul.nav > li:nth-child(1){background-color: brown;}
ul.nav > li:nth-child(2){background-color: rgb(190, 218, 32);}
ul.nav > li:nth-child(3){background-color: rgb(56, 130, 226);}
ul.nav > li:nth-child(4){background-color: rgb(205, 102, 236);}
ul.nav > li:nth-child(5){background-color: rgb(252, 120, 60);}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.kwicks-1.5.1.pack.js"></script>
<script>
$(function(){
	$("ul.nav").kwicks({
       max:1500, //최대값을 줄때 현재 부모의 가로 값보다는 적게 적용하고 남는 값은 나머지 li에게 배분이 된다고 보면 됩니다
       spacing:5,
       isHorizontal:true, //isVertical:true 방향 설정
       behavior:"menu",
       easing:"easeOutBounce"
    });

	
});
</script>
</head>

<body>
  
   <ul class="nav">
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul> 

</body>
</html>

 

mousewheel.html

<!DOCTYPE HTML>
<!-- saved from url=(0033)http://goodenough7.dothome.co.kr/ -->
<!DOCTYPE html PUBLIC "" ""><HTML lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><META 
content="IE=10.0000" http-equiv="X-UA-Compatible">
     
<META charset="utf-8">     
<META name="viewport" content="width=device-width, initial-scale=1">     
<TITLE>WELCOME</TITLE> 

    
<script src="js/jquery-1.7.2.min.js"></script>
     
<script src="js/jquery-ui.js"></script> 
    
<script src="js/jquery.mousewheel.min.js"></script>
     
<script src="js/custom.js"></script>
     
<STYLE>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Muli', sans-serif;
            font-size: 13px;
            color: #333;
        }

        img {
            border: 0;
        }

        ul, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

       SECTION{width:100%; height:700px; }
        
    </STYLE>

<BODY>
<DIV id="all"><!--1.메인페이지-->         
<SECTION id="main" style=" background:#36C;"><!--header-->            
</SECTION><!--1.메인페이지-end-->         

<!--2.about-->
<SECTION id="about" >
</SECTION>
<!--2.about-end--> 

<!--3.story-->
<SECTION id="story" style=" background:#FC3;">
</SECTION><!--3.story-end-->         

<!--6.포트폴리오_에어비앤비-->         
<SECTION id="po01" style=" background:#39F;">
</SECTION>
<!--6.포트폴리오_에어비앤비-end-->  

<!--5.포트폴리오_나뚜루팝-->         
<SECTION id="po02" style=" background:#F9C;">
</SECTION><!--5.포트폴리오_나뚜루팝-end-->                

<!--4.포트폴리오_유니클로--> 
<SECTION id="po01" style=" background:#9F9;">
</SECTION>
<!--4.포트폴리오_유니클로-end-->   

<!--7.artwork 포폴-->         
<SECTION id="work" style=" background:#F60;">
</SECTION>
<!--7.artwork 포폴-end-->        

<!--8.contact-->         
<SECTION id="contact" style=" background:#6CC;">
</SECTION>
<!--8.contact-end-->         

<!--footer--> 
<FOOTER id="footer" style=" background:#F60;">

</FOOTER>

</DIV>

</BODY>
</HTML>

 

needpopup.htm

<!DOCTYPE HTML>
<!-- saved from url=(0033)http://goodenough7.dothome.co.kr/ -->
<!DOCTYPE html PUBLIC "" ""><HTML lang="en" xmlns="http://www.w3.org/1999/xhtml"><HEAD><META 
content="IE=11.0000" http-equiv="X-UA-Compatible">
     
<META charset="utf-8">     
<META name="viewport" content="width=device-width, initial-scale=1">     
<TITLE>WELCOME</TITLE>
   

<LINK href="js/needpopup.css" rel="stylesheet" type="text/css">

       
<SCRIPT src="js/jquery-1.7.2.min.js" type="text/javascript"></SCRIPT>
    
<STYLE>

        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Muli', sans-serif;
            font-size: 13px;
            color: #333;
        }

        img {
            border: 0;
        }

        ul, li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

    </STYLE>
 

<BODY>
<DIV id="all">     
      
<DIV class="airbnb popup_btn hvr-underline-from-center">
<A href="http://goodenough7.dothome.co.kr/#" data-needpopup-show="#custom-popup1">MORE</A>
</DIV>
<DIV class="needpopup" id="custom-popup1" data-needpopup-options="custom">
<IMG width="900" src="img/airbnb.jpg">
</DIV>                    

<DIV class="airbnb popup_btn hvr-underline-from-center">
<A href="http://goodenough7.dothome.co.kr/#" data-needpopup-show="#custom-popup2">MORE</A>
</DIV>
<DIV class="needpopup" id="custom-popup2" data-needpopup-options="custom">
<IMG width="900" src="img/natuur.jpg">
</DIV>  

<DIV class="airbnb popup_btn hvr-underline-from-center">
<A href="http://goodenough7.dothome.co.kr/#" data-needpopup-show="#custom-popup3">MORE</A>
</DIV>
<DIV class="needpopup" id="custom-popup3" data-needpopup-options="custom">
<IMG width="900" src="img/uniqlo.jpg">
</DIV>  
</DIV>


<!--팝업.js-->  
   
<SCRIPT src="js/needpopup.min.js" type="text/javascript"></SCRIPT>
     
<SCRIPT>
        needPopup.config.custom = {
            'removerPlace': 'outside',
            'closeOnOutside': false,
            onShow: function () {
                console.log('needPopup is shown');
            },
            onHide: function () {
                console.log('needPopup is hidden');
            }
        };
        needPopup.init();
 </SCRIPT>
 </BODY>
 
 </HTML>

niceScroll

 

1222.html(기본)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.easing.js"></script>
    <script src="js/jquery.nicescroll.min.js"></script>
    <title>Document</title>
    <style>
        *{margin: 0; padding: 0;}
        body{overflow-x: hidden;}
        #all{width: 100%; height: 100vh; position: relative;}
        #all > div{width: 100%; height: 100vh}
        #all > div.box1{position: absolute; top:0px; left: 0;
                        background-color: brown;}
        #all > div.box2{position: absolute; top:1000px; left: 0;
                        background-color: rgb(226, 206, 23);}
        #all > div.box3{position: absolute; top:2000px; left: 0;
                        background-color: rgb(7, 184, 81);}
        #all > div.box4{position: absolute; top:3000px; left: 0;
                        background-color: rgb(101, 155, 255);}
        #all > div.box5{position: absolute; top:4000px; left: 0;
                        background-color: rgb(226, 206, 23);}
    </style>
</head>
<body>
    <div id="all">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
        <div class="box3">box3</div>
        <div class="box4">box4</div>
        <div class="box5">box5</div>
    </div>
    <script>
        $(document).ready(function(){
           
             $("#all").niceScroll({
                cursorcolor:"#777",
                cursorwidth:5,
                cursoropacitymin:1,
                scrollspeed:100,
                cursorborderradius:'0',
                mousescrollstep:40,
                horizrailenabled:true,
                cursoropacitymin:0,
                cursoropacitymax:1,
                background:"#c1c1c1",
                cursorborder:"none",
                autohidemode:false,
                boxzoom:true,
                zindex:99999,
                horizrailenabled:true
             });
         
        });
    </script>
</body>
</html>

 

test1.html(가로스크롤)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT src="js/jquery-1.10.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/jquery.nicescroll.min.js" type="text/javascript"></SCRIPT>

<style>
*{ margin:0; padding:0;}
body{ margin:0; padding:0; overflow-y: hidden}

#all{ width:100%; height:100vh; position:relative;}
#box1{ position:absolute; left:0; top:0;
       width:100%; height:100vh;
       background-color:#333;}
#box2{ position:absolute; left:100%; top:0;
       width:100%; height:100vh;
       background-color:#990;}
#box3{ position:absolute; left:200%; top:0;
	   width:100%; height:100vh;
       background-color:#3CF;}	   
#box4{  position:absolute; left:300%; top:0;
        width:100%; height:100vh;
       background-color:#FC0;}	   
#box5{ position:absolute; left:400%; top:0;
	   width:100%; height:100vh;
       background-color:#F0F;}	   
</style>
</head>

<body>

<script type="text/javascript">
$(document).ready(

  function() { 
    $("#all").niceScroll({
		cursorcolor:"#777",
		cursorwidth:5,
		cursoropacitymin:1,
		scrollspeed:100,
		cursorborderradius:'0',
		mousescrollstep:40,
		horizrailenabled:true,
		cursoropacitymin:0,
		cursoropacitymax:1,
		background:"#c1c1c1",
		cursorborder:"none",
		autohidemode:false,
		boxzoom:true,
		zindex:99999,
		horizrailenabled:true

	});
  }

); 
</script>
<div id="all" >
 <div id="box1"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div id="box4"></div>
 <div id="box5"></div>
</div>

</body>
</html>

 

test2.html(세로스크롤)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT src="js/jquery-1.10.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="js/jquery.nicescroll.min.js" type="text/javascript"></SCRIPT>

<style>
*{ margin:0; padding:0;}
body{ margin:0; padding:0; overflow-y: hidden}

#all{ width:100%; height:100vh; position:relative;}
#box1{ position:absolute; left:0; top:0;
       width:1000%; height:1000px;
       background-color:#333;}
#box2{ position:absolute; left:0; top:1000px;
       width:100%; height:1000px;
       background-color:#990;}
#box3{ position:absolute; left:0; top:2000px;
	   width:100%; height:1000px;
       background-color:#3CF;}	   
#box4{  position:absolute; left:0; top:3000px;
        width:100%; height:1000px;
       background-color:#FC0;}	   
#box5{ position:absolute; left:0; top:4000px;
	   width:100%; height:1000px;
       background-color:#F0F;}	   
</style>
</head>

<body>

<SCRIPT type="text/javascript">
$(document).ready(

  function() { 
    $("#all").niceScroll({
		cursorcolor:"#777",
		cursorwidth:10,
		cursoropacitymin:1,
		scrollspeed:100,
		cursorborderradius:'0',
		mousescrollstep:40,
		horizrailenabled:true,
		cursoropacitymin:0,
		cursoropacitymax:1,
		background:"#c1c1c1",
		cursorborder:"none",
		autohidemode:false,
		boxzoom:true,
		zindex:99999,
		horizrailenabled:false

	});
  }

); 
</SCRIPT>
<div id="all" >
 <div id="box1"></div>
 <div id="box2"></div>
 <div id="box3"></div>
 <div id="box4"></div>
 <div id="box5"></div>
</div>

</body>
</html>

  /*
cursorcolor - 커서 색상을 16 진수로 변경합니다. 기본값은 "# 000000"입니다.
cursoropacitymin - 불투명도 변경 커서가 비활성 상태 (스크롤바의 "숨김"상태), 범위는 1에서 0까지, 기본값은 0 (숨김)입니다.
cursoropacitymax - 불투명도 변경 매우 커서가 활성화되어 있습니다 (스크롤바의 "가시"상태). 범위는 1에서 0까지이며, 기본값은 1입니다 (전체 불투명도).
cursorwidth - 커서의 너비 (픽셀 단위), 기본값은 5입니다 ( "5px"도 쓸 수 있음).
cursorborder - 커서 테두리의 CSS 정의입니다. 기본값은 "1px solid #fff"입니다.
cursorborderradius - 커서의 테두리 반경, 기본값은 "4px"입니다.
zindex - 스크롤바 div의 Z- 인덱스 변경, 기본값은 9999입니다.
scrollspeed - 스크롤 속도, 기본값은 60입니다.
mousescrollstep - 마우스 휠로 스크롤 속도, 기본값은 40 (픽셀)입니다.
touchbehavior - 데스크톱 컴퓨터의 터치 장치처럼 커서 드래그 스크롤링 사용 (기본값 : false)
hwacceleration - 지원되는 경우 하드웨어 가속 스크롤 사용 (기본값 : true)
boxzoom - 상자 내용을 확대 할 수있게합니다 (기본값 : false).
dblclickzoom - (boxzoom = true 인 경우에만 해당) 상자를 두 번 클릭하면 줌이 활성화됩니다 (기본값 : true).
gesturezoom - (boxzoom = true 및 터치 장치 인 경우에만) 피치 아웃 / 인 온 상자에서 줌이 활성화됩니다 (기본값 : true).
grabcursorenabled, touchbehavior = true로 div의 "grab"아이콘 표시 (기본값 : true)
자동 숨기기 모드, 스크롤 막대의 숨김 방법, true = 기본값 / "커서"= 커서 만 숨김 / false = 숨기지 않음
배경, 레일 배경에 대한 CSS 변경, 기본값은 ""
iframeautoresize,로드 이벤트에서 iframe 자동 크기 조정 (기본값 : true)
cursorminheight, 픽셀 단위로 최소 커서 높이 설정 (기본값 : 20)
preservenativescrolling을 사용하면 네이티브 스크롤 영역을 마우스로 스크롤하거나 마우스 휠 이벤트를 버블 링 할 수 있습니다 (기본값 : true)
railoffset을 사용하면 레일 위치에 대해 위쪽 / 왼쪽 오프셋을 추가 할 수 있습니다 (기본값 : false).
bouncescroll, 콘텐츠의 끝에서 모바일처럼 (단지 hw accell) 스크롤 바운스 가능 (기본값 : false)
spacebarenabled, 스페이스 바를 눌렀을 때 페이지 아래로 스크롤 가능 (기본값 : true)
레일 파딩, 레일 바용 패딩 설정 (기본값 : {위쪽 : 0, 오른쪽 : 0, 왼쪽 : 0, 아래쪽 : 0})
disableoutline, 크롬 브라우저의 경우 nicescroll을 사용하여 div를 선택할 때 윤곽선을 비활성화합니다 (오렌지색의 hightlight) (기본값 : true).
horizrailenabled, nicescroll은 가로 스크롤을 관리 할 수 ​​있습니다 (기본값 : true).
railalign, 수직 레일 정렬 (defaul : "right")
railvalign, 수평 레일 정렬 (defaul : "bottom")
enabletranslate3d, nicescroll은 내용을 스크롤하기 위해 css translate를 사용할 수 있습니다 (기본값 : true).
enablemousewheel, nicescroll은 마우스 휠 이벤트를 관리 할 수 ​​있습니다 (기본값 : true).
enablekeyboard, nicescroll은 키보드 이벤트를 관리 할 수 ​​있습니다 (기본값 : true).
smoothscroll, 쉽게 움직이는 스크롤 (기본값 : true)
sensitiverail, 레일을 클릭하여 스크롤합니다 (기본값 : true).
마우스 캡션 잠금 API를 사용할 수 있습니다 (개체 드래그에서 동일한 문제) (기본값 : true)
cursorfixedheight, 픽셀 단위의 커서 고정 높이 설정 (기본값 : false)
hidecursordelay, 마이크로 초 단위로 지연을 설정하여 스크롤바를 페이드 아웃 (기본값 : 400)
directionlockdeadzone, 방향 잠금 활성화 (기본값 : 6)의 데드 존 (픽셀)
nativeparentscrolling, 내용의 하단을 감지하고 네이티브 스크롤이 부모처럼 스크롤하도록합니다 (기본값 : true).
선택 스크롤을 활성화하고 선택 텍스트 (기본값 : true) 일 때 내용의 자동 스크롤 사용
  
  */

wheel_event

 

1222.html(마우스 휠 이벤트)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>마우스휠이벤트</title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <style>
        *{margin: 0; padding: 0;}

        #wrap{ width: 100%;}
        #wrap > section{ width: 100%; height: 100vh;}
        #wrap > section#box1{ background-color:aquamarine;}
        #wrap > section#box2{ background-color: blueviolet;}
        #wrap > section#box3{ background-color: burlywood;}
        #wrap > section#box4{ background-color: coral;}
    </style>
    <script>
        (function($){
                $.aniPage=function(e,type){
                    if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0){
                        $("body, html").animate({
                            scrollTop:$(window).scrollTop()-$(window).height()
                        },1000,function(){
                                $.aniOk = 0;
                        });
                    }else{
                        $("body, html").animate({
                            scrollTop:$(window).scrollTop()+$(window).height()
                        },1000,function(){
                                $.aniOk = 0;
                        });
                    }
                };
            })(jQuery);
            $(function(){
                $(".w_box").height($(window).height());//마우스휠이벤트가 적용될 대상을 입력
                //형제요소끼리만 이동이가능
                $.aniOk=0;
                $(window).scrollTop(0);
            });
            $(document).on("mousewheel DOMMouseScroll",function(e){
                e.preventDefault();
                if($.aniOk == 0){
                    $.aniPage(e,e.type);
                    $.aniOk = 1;
                }
            });
        </script>
</head>
<body>
    <div id="wrap">
    <section id="box1" class="w_box">box1</section>
    <section id="box2" class="w_box">box2</section>
    <section id="box3" class="w_box">box3</section>
    <section id="box4" class="w_box">box4</section>
    </div>
</body>
</html>

 

ex.html(마우스 휠 이벤트 + 네비바)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui.min.js"></script>



<script>
(function($){
        $.aniPage=function(e,type){
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0){
                $("body, html").animate({
                    scrollTop:$(window).scrollTop()-$(window).height()
                },1000,function(){
                        $.aniOk = 0;
                });
            }else{
                $("body, html").animate({
                    scrollTop:$(window).scrollTop()+$(window).height()
                },1000,function(){
                        $.aniOk = 0;
                });
            }
        };
    })(jQuery);
    $(function(){
        $(".w_box").height($(window).height());
        $.aniOk=0;
        $(window).scrollTop(0);
    });
    $(document).on("mousewheel DOMMouseScroll",function(e){
        e.preventDefault();
        if($.aniOk == 0){
            $.aniPage(e,e.type);
            $.aniOk = 1;
        }
    });
</script>






<style>
*{
	padding:0; margin:0;	
}
ul,li{
	list-style:none;	
}
a{
	text-decoration:none;
	color:#000;	
}


header {
	position:fixed;
	width:100%;
	height:100px;
	background:#ccc;	
}
nav ul{
		
}
nav li{
	float:left;
	width:20%;
}


.w_box{
	margin:0 auto;
	width:80%;
	height:900px;
}
#box1{	
	background:#f00;
}
#box2{	
	background:#0f0;
}
#box3{	
	background:#ff0;
}
#box4{	
	background:#f0f;
}
</style>


</head>

<body>
<div id="all">
	<header>
    	<nav>
        	<ul id="menu">
            	<li><a href="#box1">box1</a></li>
                <li><a href="#box2">box2</a></li>
                <li><a href="#box3">box3</a></li>
                <li><a href="#box4">box4</a></li>
            </ul>
        </nav>
    </header>
    <section id="box1" class="w_box"></section>
    <section id="box2" class="w_box"></section>
    <section id="box3" class="w_box"></section>
    <section id="box4" class="w_box"></section>
</div>

</body>
</html>

'코리아 IT아카데미 > Javascript·Jquery~~~' 카테고리의 다른 글

8일차 | 애니메이션과 css차이, 가로스크롤메뉴, 마우스 따라 움직이는 네비게이션바,toggle, tooltip 도움말 효과  (0) 2022.03.30
7일차 | 퀵메뉴가 있는 슬라이드배너, 좌우,상하,디졸브 슬라이드배너  (0) 2022.03.30
6일차 | 자동 슬라이드 배너, 자식부모관계, 박스사이즈, 스크롤값, 드래그값  (0) 2022.03.17
5일차 | 기본적인 갤러리, 일반적인 슬라이드 갤러리  (0) 2022.03.17
4일차 | jquery(가로메뉴, 세로메뉴 , 애니메이션, 풀다운 메뉴)  (0) 2022.03.17

관련글

티스토리툴바