[위챗 공중 플랫폼 개발] 위챗 스크래치, 삼성 호환성 문제 해결

2695 단어
스크래치 jquery 플러그인:wScratchPad
전체 프로젝트 자원 다운로드: 클릭하여 링크 열기
wScratchPad 플러그인을 사용하면 다음과 같은 코드를 사용하여 스크래치 효과를 빠르게 얻을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
    
    <meta CHARSET="UTF-8">
    
    <title>   </title>
    <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="./wScratchPad.js"></script>
</head>
   	<div id="scratchpad" style="display:inline-block; position:relative;"></div>
   
    <script type="text/javascript">
    
        $("#scratchpad").wScratchPad({
            width:'150',height:'40',color : "#a9a9a7",
            scratchMove: function(e, percent)
            {
            	
                if(percent > 70)
                this.clear();
                
            },
        });
      
    </script>
</body>
</html>

그러나 뒤에 프로젝트를 사용했을 때 삼성노트3에서 전혀 긁을 수 없었고 인터넷에서 문제를 검색하고 오랫동안 고생한 끝에 다음과 같은 코드를 고쳤다.
<!DOCTYPE html>
<html>
<head>
    
    <meta CHARSET="UTF-8">
    
    <title>   </title>
    <script type="text/javascript" src="./inc/jquery.1.8.2.min.js"></script>
    <script type="text/javascript" src="./wScratchPad.js"></script>
</head>
   	<div id="scratchpad" style="display:inline-block; position:relative;"></div>
   
    <script type="text/javascript">
    	
        var useragent = window.navigator.userAgent.toLowerCase();
        $("#scratchpad").wScratchPad({
            width:'150',height:'40',color : "#a9a9a7",
            scratchMove: function(e, percent)
            {
            	if (useragent.indexOf("android 4") > 0)
            	{
            		
            		$("#scratchpad").css("color", "rgb(50,50,50)");
					if ($("#scratchpad").css("color").indexOf("51") > 0) 
					{
					
						$("#scratchpad").css("color", "rgb(50,50,50)");
					} 
					else if($("#scratchpad").css("color").indexOf("50") > 0) 
					{
						
						$("#scratchpad").css("color", "rgb(51,51,51)");
					}
		}
                if(percent > 70)
                this.clear();
                
            },
        });
      
    </script>
</body>
</html>

전체 프로젝트 자원 다운로드: 클릭하여 링크 열기

좋은 웹페이지 즐겨찾기