PROMULGATOR

    zxjBigPower

    广东省深圳市天威视讯
    Html
    Css
    Js

    
                        


                        

                            


.con {
	padding:20px;
	border:1px solid #000;
	height:120px;
	width:320px;
	margin:100px auto;
}
.con .con-box {
	height:100px;
	width:320px;
	background:url("http://www.jq22.com/img/cs/500x300-2.png") no-repeat center;
	position:relative;
}
.con .con-box .con-slide {
	position:absolute;
	top:0;
	left:0px;
	width:60px;
	height:100px;
	background-repeat:no-repeat;
	background-position:right center;
	background-image:url("http://www.jq22.com/img/cs/300x500-1.png");
}
input[type=range] {
	width:100%;
}


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
简单滑动验证

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
/*
* 滑动验证
* range：滑动条 conSlide：划片 obj.max(最大滑动值)，obj.err(误差值)
*因为只针对一个图做的匹配，其中滑动的最完美值是320px的位置。
* */

                         

                     

                   
                


                
3



  
    
      
    
    

     

            
    
              
    
              
      
                
       ZingRoger0
      
                
       2017/7/27 17:25:58
      
                
      
              
    
              
      
                
      第一次拉动input,验证成功，之后直接点击input,验证成功，他应该是这个意思
      
                
                回复
                
      
                
      
              
    
            
    



  
                   
         
         

            
    
              
    
              
      
                
       心灵☆孤僻0
      
                
       2017/7/7 13:45:13
      
                
      
              
    
              
      
                
      不拉动input元素,而直接点击input时,只有首次时,图片会动,后续点击时,图片不会移动
      
                
                        
        
                          
        
                              
        
                               
          
                                   
           zxjBigPower0
          
                                   
           2017/7/11 14:59:25
          
                                   
          
  						        
        
                               
          
                                  能发一个简短视频么，我测试时没出现这种问题啊，加我qq:1242986660
                                
        
                           
        
                        
      
                    
                回复