图片验证码

左手的ㄟ右手 2021-07-24 23:30 485阅读 0赞

图片验证

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		
    		<style>
    			*{ 
    				margin:0px;
    				padding: 0px;
    			}
    			
    			.big{ 
    				height:600px;
    				width:600px;
    				position: relative;
    				background-image: url(img/花2.jpg);
    			}
    			.small{ 
    				position: absolute;
    				background-image: url(img/花1.png);
    				width:235px;
    				height:204px;
    				left:0px;
    				top:64px;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="big">
    			<div class="small">
    				
    			</div>
    		</div>
    		
    		
    		<script>
    			//获取页面元素
    			var big =document.querySelector(".big");
    			var small=document.querySelector(".small");
    			
    			var flag=false;
    			//判断是否是第一次移动
    			var once=true;
    			
    			//添加鼠标事件
    			
    			var sx;
    			var tx;
    			var result;
    			small.onmousedown=function(event)
    			{ 
    // if(once){ 
    					flag=true;
    					var event=event||window.event;
    					sx=event.clientX;
    					tx=small.offsetLeft;
    				/*} once=false;*/
    			
    				
    			}
    			
    			
    			big.onmousemove=function(event)
    			{ 
    				if(flag)
    				{ 
    					var event=event||window.event;
    					var ssx=event.clientX;
    					result=tx+ssx-sx;
    					
    	
    					if(result<0)
    					{ 
    						result=0;
    					}
    					if(result>big.clientWidth-small.clientWidth)
    					{ 
    						result=big.clientWidth-small.clientWidth;
    					}
    					
    					
    					small.style.left=result+"px";
    					
    				}
    				
    				
    			}
    			
    			
    			big.onmouseup=function()
    			{ 
    				flag=false;
    				
    				/*进行图片校验*/
    				if(result>=174&&result<=190)
    				{ 
    					alert("我爱你♥");
    				}else{ 
    					alert("差一点就能说出");
    				}
    			}
    			
    			
    			
    			
    			//
    			
    			
    		</script>
    	</body>
    </html>