久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>
    <p id="vfaef"><kbd id="vfaef"></kbd></p>
    

    <pre id="vfaef"><u id="vfaef"></u></pre>
      <thead id="vfaef"><input id="vfaef"></input></thead>
      

    1. 

      
	
      
				
      站長(zhǎng)資訊網(wǎng)

      最全最豐富的資訊網(wǎng)站
      		
				
						
			
      

      
	

      
	
      
	
      
				
      
			
      利用js實(shí)現(xiàn)圖片固定在屏幕的某個(gè)位置！
                         
      
			
                          
      
				2022-08-08
												分類：編程知識(shí)
				閱讀(420)				評(píng)論(0)
				
			
      
		
      
				
      
						
      

      

      利用js獲取滾動(dòng)條滾動(dòng)距離，實(shí)現(xiàn)圖片固定在屏幕的某個(gè)位置
      

      思路：
       1.獲取對(duì)象距離頂部和左側(cè)的距離；
       2.獲取元素對(duì)象；
       3.當(dāng)滾動(dòng)條滾動(dòng)時(shí)獲取滾動(dòng)條滾動(dòng)的距離；
       4.滾動(dòng)條滾動(dòng)時(shí)執(zhí)行函數(shù)：對(duì)象距離頂部 / 左側(cè)的距離變?yōu)樵揪嚯x頂部 / 左側(cè)的距離+滾動(dòng)條滾動(dòng)像素?cái)?shù)。
      

      html代碼：
      

      <!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title> </head> <body>     <div id="left">         <img src="images/z1.jpg" alt=""/>     </div>     <div id="right">         <img src="images/z2.jpg" alt=""/>     </div> </body> </html>
      

      css代碼：
      

      *{             margin: 0;             padding: 0;         }         body{             width: 2000px;             height: 2000px;         }         .left{             position: absolute;             width: 110px;             height: 110px;             top: 100px;             left: 50px;         }         .right{             position: absolute;             width: 110px;             height: 110px;             top: 100px;             left: 1360px;         }
      

      js代碼：
      

       var leftT;//左側(cè)p距離頂部距離         var leftL;//左側(cè)p距離左側(cè)距離         var rightT;//右側(cè)p距離頂部距離         var rightL;//右側(cè)p距離左側(cè)距離          var objLeft;//左側(cè)p文檔對(duì)象         var objRight;//右側(cè)p文檔對(duì)象          function place(){             objLeft=document.getElementById("left");             objRight=document.getElementById("right");             leftT=document.defaultView.getComputedStyle(objLeft,null).top;             leftL=document.defaultView.getComputedStyle(objLeft,null).left;             rightT=document.defaultView.getComputedStyle(objRight,null).top;             rightL=document.defaultView.getComputedStyle(objRight,null).left;          }         //獲取滾動(dòng)條滾動(dòng)的像素?cái)?shù)         function move(){             var scrollT=document.documentElement.scrollTop;             var scrollL=document.documentElement.scrollLeft;             //設(shè)置左側(cè)p距離頂部的像素             objLeft.style.top=parseInt(leftT)+scrollT+"px";             objLeft.style.left=parseInt(leftL)+scrollL+"px";             objRight.style.top=parseInt(rightT)+scrollT+"px";             objRight.style.left=parseInt(rightL)+scrollL+"px";         }         window.onload=place;         window.onscroll=move;
      

      
		
      
								            
      
            	贊(0)            	            	            
      
        				
					
      
分享到：








更多 (0)

      

      
		
		
      標(biāo)簽：
      
		
		
		            
        
									
      
	
      
	
      


      
	網(wǎng)站地圖  
  
    滬ICP備18035694號(hào)-2
    
	滬公網(wǎng)安備31011702889846號(hào)