码迷,mamicode.com
首页 > 微信 > 详细

【微信公众平台开发】微信刮刮乐,解决三星兼容性问题

时间:2014-06-22 21:54:17      阅读:519      评论:0      收藏:0      [点我收藏+]

标签:android   style   class   blog   code   java   

刮刮乐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>


可是后面用到项目时,发现在三星note3里面根本刮不了,网上搜问题,折腾了好久,改写如下代码:

<!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>



完整项目资源下载:点击打开链接

【微信公众平台开发】微信刮刮乐,解决三星兼容性问题,布布扣,bubuko.com

【微信公众平台开发】微信刮刮乐,解决三星兼容性问题

标签:android   style   class   blog   code   java   

原文地址:http://blog.csdn.net/qivan/article/details/32716043

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!