站長資訊網
思路： html代碼： css代碼： js代碼：
利用js獲取滾動條滾動距離，實現圖片固定在屏幕的某個位置
1.獲取對象距離頂部和左側的距離；
2.獲取元素對象；
3.當滾動條滾動時獲取滾動條滾動的距離；
4.滾動條滾動時執行函數：對象距離頂部 / 左側的距離變為原本距離頂部 / 左側的距離+滾動條滾動像素數。<!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>
*{ 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; }
var leftT;//左側p距離頂部距離 var leftL;//左側p距離左側距離 var rightT;//右側p距離頂部距離 var rightL;//右側p距離左側距離 var objLeft;//左側p文檔對象 var objRight;//右側p文檔對象 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; } //獲取滾動條滾動的像素數 function move(){ var scrollT=document.documentElement.scrollTop; var scrollL=document.documentElement.scrollLeft; //設置左側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;
站長資訊網
最全最豐富的資訊網站
最全最豐富的資訊網站
