站長資訊網(wǎng)
思路： html代碼： css代碼： js代碼：
利用js獲取滾動條滾動距離，實現(xiàn)圖片固定在屏幕的某個位置
1.獲取對象距離頂部和左側(cè)的距離；
2.獲取元素對象；
3.當滾動條滾動時獲取滾動條滾動的距離；
4.滾動條滾動時執(zhí)行函數(shù)：對象距離頂部 / 左側(cè)的距離變?yōu)樵揪嚯x頂部 / 左側(cè)的距離+滾動條滾動像素數(shù)。<!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;//左側(cè)p距離頂部距離 var leftL;//左側(cè)p距離左側(cè)距離 var rightT;//右側(cè)p距離頂部距離 var rightL;//右側(cè)p距離左側(cè)距離 var objLeft;//左側(cè)p文檔對象 var objRight;//右側(cè)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; } //獲取滾動條滾動的像素數(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;
站長資訊網(wǎng)
最全最豐富的資訊網(wǎng)站
最全最豐富的資訊網(wǎng)站
