집 >웹 프론트엔드 >JS 튜토리얼 >jQuery 구현을 기반으로 상위 예제 code_jquery로 돌아갑니다.

jQuery 구현을 기반으로 상위 예제 code_jquery로 돌아갑니다.

WBOY원래의: 2016-05-16 15:22:291286검색

렌더링은 아래와 같습니다.

사용법:

jQuery 라이브러리와 YesTop 플러그인을 참조한 다음 한 줄의 코드를 사용하여 맨 위로 돌아갑니다.

견적 코드:

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>

사용 코드:

<script type="text/javascript">
   $(document).ready(function () { $.fn.yestop(); })
</script>

즉,

$.fn.yestop();

이 코드로 충분합니다.

물론 사진 변경, 아이콘을 원형으로 설정, 위치 설정, 시간 설정 등의 고급 설정도 있습니다. 자세한 내용은 다른 데모를 참조하세요.
코드를 완성하고 HTML 파일에 저장하여 효과를 경험해 보세요.

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
  <title>YesTop - HoverTree</title><meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
  <script type="text/javascript" src="http://hovertree.com/texiao/yestop/inc/jquery.yestop.js"></script>
  <style>
    body {
      margin: 0px;font-family:Arial
    }a{color:blue}
  </style>
</head>
<body>
  <div style="text-align:center;width:100%;margin:0px auto;">
    <h1>YesTop</h1>
    A jQuery Plugin<br />
    <a href="http://hovertree.com/texiao/yestop/">Demo 1</a> <a href="http://hovertree.com/texiao/yestop/demo2.htm">Demo 2</a> <a href="http://hovertree.com/texiao/yestop/demo3.htm">Demo 3</a>
    <a href="http://hovertree.com/texiao/yestop/demo4.htm">Demo 4</a> <a href="http://hovertree.com/h/bjaf/topimage.htm">Images</a>
  </div>
  <div style="height: 360px;background-color: #66FF66;">
    
  </div>
  <div style="width:100%;text-align:center;height:200px">&copy; hovertree.com</div>  
  <div style="height: 200px; visibility: visible; background-color: Olive">
  </div><div style="height:200px;background-color:burlywood"></div><div style="height:200px;background-color:darkorchid"></div>
  <div style="height: 200px; visibility: visible; background-color:gray">
  </div>
  <div style="height:200px;background-color:blue"></div>
  <div style="height:200px;background-color:red"></div>
  <div style="height:200px;background-color:yellow"></div>
  <div style="height:200px;background-color:yellowgreen"></div>
  <div style="height:800px;background-color:white"></div>
  <script type="text/javascript">
    $(document).ready(function () { $.fn.yestop(); })
  </script>
</body>
</html>

위 내용은 jQuery를 기반으로 상위로 돌아가는 예제 코드를 여러분께 공유해 드리는 내용입니다.

성명：

이전 기사：jQuery_jquery를 기반으로 클릭 팝업 레이어 예제 코드 구현다음 기사：jQuery_jquery를 기반으로 클릭 팝업 레이어 예제 코드 구현

jQuery 구현을 기반으로 상위 예제 code_jquery로 돌아갑니다.

관련 기사