jQuery로 만든 티켓 벽 효과【demo 소스 코드 다운로드 부록】

이 글은 jQuery를 사용하여 드래그 가능한 원망벽 효과를 구현하는 방법을 설명합니다. 여러분과 공유하고, 구체적인 내용은 다음과 같습니다：

실행 결과 그림如下입니다：

기능 포인트를 간단히 설명드리겠습니다：

① 무작위 배경 이미지나 배경색이 표시됩니다
② 나타나는 위치는 무작위입니다
③ 위치를 드래그로 변경할 수 있습니다

제가 준 코드를 보여드리겠습니다：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <title>许愿墙</title>
  <link rel="stylesheet" href="base.min.css">/>
  <style>
  #wish{height:650px;margin:20px;position:relative;width:960px;}
  .wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}
  .wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}
  </style>
</head>
<body>
  <ul id="wish">
    <li>11111</li>
    <li>22222</li>
    <li>33333</li>
    <li>44444</li>
    <li>55555</li>
  </ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
  $('#wish').wish();
  $('.wish').draggable({containment:'#wish',scroll:false});
});
</script>

주의:

jqueryui는 draggable와 scale Effect를 로드해야 합니다. draggable는 드래그 앤 드롭을 지원하며, scale Effect는 클릭하여 닫는 효과입니다.

전체 예제 코드를 여기에서 클릭하여 확인하세요본 사이트 다운로드。

jQuery와 관련된 더 많은 내용에 관심이 있는 독자는 다음 사이트의 특辑을 확인할 수 있습니다：《jQuery 드래그 앤 드롭 효과 및 기술 요약》、《jQuery 일반 플러그인 및 사용 방법 요약》、《jQuery에서 Ajax 사용 요약》、《jQuery 테이블(table)操作 기술 요약》、《jQuery 확장 기술 요약》、《jQuery 일반 클래식 효과 요약》、《jQuery 애니메이션 및 효과 사용 요약》 및 《jQuery 선택자 사용 요약》

본 문서에서 설명한 내용이 여러분의 jQuery 프로그래밍에 도움이 되길 바랍니다.

언급: 본 내용은 인터넷에서 가져왔으며, 저작권자는 본 사이트에 소유권을 가지고 있지 않으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 사이트는 편집을 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 위반이 의심되는 내용이 있으시면, notice#w로 이메일을 보내 주세요.3codebox.com（보내는 이메일에서 #을 @으로 변경하십시오. 신고하시고 관련 증거를 제공하시면, 사이트는 즉시 위반 내용을 삭제합니다.

기본 튜토리얼