亚洲高清vr播放在线观看,欧美亚洲精品免费,欧美日韩天堂在线视频,午夜福利小视频

    

      

      
	
      
		
      
				
			
		
      
	
      
	
      
		
      			
			
			學(xué)習(xí)啦 > 學(xué)習(xí)電腦 > 電腦硬件知識(shí) > 鍵盤鼠標(biāo) >  怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果
		
      
		
      
			
      
				
      
					
      
						
      怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果
      
						
      
							
      
								時(shí)間：
								沈迪豪908由  分享
								
							
      						
						
      
					
      
					
      

					
      
					
      怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果
       　　前端成為現(xiàn)在的大熱，想學(xué)習(xí)前端就必須會(huì)js，你知道怎么用js實(shí)現(xiàn)鼠標(biāo)跟隨效果嗎?下面由學(xué)習(xí)啦小編教大家怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果
       　　js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果的方法
       　　鼠標(biāo)跟隨，顧名思義，就是在鼠標(biāo)移動(dòng)的時(shí)候，有個(gè)動(dòng)畫(huà)跟隨著鼠標(biāo)一起移動(dòng)。
       　　要點(diǎn)一：
       1
             		  
       
       var oEvent = evt || window.event;
       
             		 
              
       
       　　這個(gè)是為了兼容ie和ff而寫(xiě)的，在ie下window.event表示event對(duì)象，而ff下，是給事件函數(shù)傳一個(gè)參數(shù)，這個(gè)參數(shù)就表示事件對(duì)象。
       
       　　要點(diǎn)二：
       
        
        
       1
             		  
       
       document.onmousemove = function(evt)
       
             		 
              
       
       　　鼠標(biāo)跟隨是在鼠標(biāo)移動(dòng)時(shí)發(fā)生的事情。
       
       　　要點(diǎn)三：
       
        
        
       1
             		  
       
       document.documentElement.scrollTop || document.body.scrollTop;
       
             		 
              
       
       　　這是為了兼容chrome和其它瀏覽器，滾動(dòng)條距上邊滾動(dòng)的距離，chrome用后邊那個(gè)，其它瀏覽器用前面那個(gè)。
       
       　　要點(diǎn)四：
       
        
        
       1
             		  
       
       oTop.style.top=oEvent.clientY+scrolltop+10+"px";
       
             		 
              
       
       　　當(dāng)鼠標(biāo)移動(dòng)時(shí)把鼠標(biāo)的當(dāng)前位置賦值給元素的位置值。
       
       　　oEvent.clientY即為鼠標(biāo)的當(dāng)前Y坐標(biāo)的位置，加scrolltop的距離是要在滾動(dòng)到不是第一屏的時(shí)候，鼠標(biāo)跟隨效果依然不改變而寫(xiě)。
       
       　　代碼如下：
       
        
        
       1
       
       2
       
       3
       
       4
       
       5
       
       6
       
       7
       
       8
       
       9
       
       10
       
       11
       
       12
       
       13
       
       14
       
       15
       
       16
       
       17
       
       18
       
       19
       
       20
       
       21
       
       22
       
       23
       
       24
       
       25
       
       26
       
       27
       
       28
       
       29
       
       30
       
       31
       
       32
       
       33
       
       34
       
       35
       
       36
       
       37
             		  
       
       <!DOCTYPE html>
       
       <html>
       
       <head>
       
       <meta charset="utf-8" />
       
       <title>無(wú)標(biāo)題文檔</title>
       
       <style>
       
       body{margin:0; padding:0}
       
       #to_top{
       
       width:30px;
       
       height:40px;
       
       padding:20px;
       
       font:14px/20px arial;
       
       text-align:center;
       
       background:#06c;
       
       position:absolute;
       
       cursor:pointer;
       
       color:#fff
       
       }
       
       </style>
       
       <script>
       
       window.onload = function(){
       
       var oTop = document.getElementById("to_top");
       
       document.onmousemove = function(evt){
       
       var oEvent = evt || window.event;
       
       var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;
       
       var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
       
       oTop.style.left = oEvent.clientX + scrollleft +10 +"px";
       
       oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";
       
       }
       
       }
       
       </script>
       
       </head>
       
       <body style="height:1000px;">
       
       <a href="#">文字</a>
       
       <div id="to_top">鼠標(biāo)跟隨</div>
       
       </body>
       
       </html>
       
             		 
              
       
       
       怎么用js實(shí)現(xiàn)簡(jiǎn)單鼠標(biāo)跟隨效果相關(guān)文章：
       
       1.怎么制作鼠標(biāo)跟隨動(dòng)畫(huà)
       
       2.使用js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊變色
       
       3.js設(shè)置鼠標(biāo)光標(biāo)形狀
       
       4.js實(shí)現(xiàn)鼠標(biāo)移到圖片顯示文字
       
       5.flash鼠標(biāo)跟隨代碼怎么打
       
					
      
					
      
					
      
						
        
							
							
        
						
      
					
      		
				
      
				
				
      
			
      
			
			
      
		
      
	
      
	



	
      	
	1946937