드래그 앤 스크래핑 코팅 효과는 jquery UI의 드래그 가능한 방식을 사용합니다 소스코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > http://www.w3.org/1999/xhtml"> jQuery UI는 긁는 복권 코팅을 시뮬레이션하여 결과를 표시합니다 <br> #keleyi{너비:200px;높이:20px;위치:상대;텍스트 정렬:센터;글꼴 크기:12px;오버플로:숨김;배경:#eee;}<br> #keleyi div{위치:absolute;top:0px;왼쪽:0px;너비:100%;높이:20px;배경:#ccc;}<br> #layout2{너비:200px;높이:20px;위치:상대적;텍스트 정렬:중심;글꼴 크기:12px;오버플로:숨김;배경:#eee;}<br> #layout2 div{위치:절대;상단:0px;오른쪽:0px;너비:100%;높이:20px;배경:#ccc;}<br> </스타일><br> <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script><br> <script src="http://keleyi.com/keleyi/pmedia/jquery/ui/1.10.3/js/jquery-ui-1.10.3.min.js" type="text/javascript">< ;/스크립트> <script type="text/javascript"><br> $(문서).ready(함수() {<br> $("#keleyi div").draggable({<br> 되돌리기:함수() {<br> var a = $("#keleyi div").offset().left;<br> var b = $("#kel" "eyi").width();<br> if (a >= b) {<br> $("#keley" "i").text("5천만 달러 대상 수상을 축하합니다!").css("color","red").fadeOut(200).fadeIn(500);<br> false를 반환합니다.<br> }그밖에{<br> true를 반환합니다.<br> }<br> },<br> 축: "x", 스냅: "#keleyi", 스크롤: false}<br> );<br> $("#layout2 div").click(function() {<br> $(this).animate({<br> 너비 : " =20",<br> }).animate({<br> 너비 : "-=50",<br> });<br> if ($(this).width() <= 30) {<br /> $("#layout2").text("5천만 달러 대상 수상을 축하합니다!").css("color","red").fadeOut(200).fadeIn(500);<br /> }<br /> });<br /> });<br /> </script><br /> </머리><br> <br> <div>참고: IE6은 지원되지 않습니다! </div><br> <p></p><br> <p>효과 1(회색 막대 드래그):</p><br> <div id="keleyi"><br> <div></div><br> 당첨 결과를 보시려면 완전히 긁어주세요. <br> </div><br> <p></p><br> <p>효과 2(회색 막대 클릭): </p><br> <div id="layout2"><br> <div></div><br> 당첨 결과를 보시려면 완전히 긁어주세요. <br> </div><br> <br /><br> </본문><br> </div>
