|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
純CSS(非JS)代碼實(shí)現(xiàn)固定對(duì)聯(lián)的方法 超短超實(shí)用！
作者:admin 時(shí)間:2015-6-17 9:40:52 瀏覽:之前用JS實(shí)現(xiàn)對(duì)聯(lián)漂浮，從而固定它不讓它隨滾動(dòng)條往上移，不過用了后感覺效果不是很好，因?yàn)镴S一直在計(jì)算對(duì)聯(lián)的位置，然后對(duì)其移位，如果滾動(dòng)條拉得快一點(diǎn)，對(duì)聯(lián)會(huì)先出現(xiàn)在屏幕下方，然后在JS的作用下，移到設(shè)定的位置（距離上方有多少像素），這對(duì)網(wǎng)頁瀏覽者的體驗(yàn)不是很好，有點(diǎn)晃眼。固定對(duì)聯(lián)，應(yīng)該是讓它絲毫不動(dòng)的固定著才對(duì)。今天終于寫了一個(gè)代碼，是用純CSS實(shí)現(xiàn)(非JS)代碼實(shí)現(xiàn)固定對(duì)聯(lián)，效果非常好。
純CSS(非JS)代碼實(shí)現(xiàn)固定對(duì)聯(lián)的方法
不多講，先看演示效果吧：
http://www.howtostagehomes.com/info/ARCHIVES/demo/duilian.html
實(shí)現(xiàn)代碼如下：
<!--左側(cè)對(duì)聯(lián)-->
<div style="width:125px;height:125px;position:fixed;float:left;left:1px;top:150px;">
<img src="/click/duilian-125x125-demo.gif">
</div>
<!--左側(cè)對(duì)聯(lián)-->
代碼解釋：
width:125px 是固定對(duì)聯(lián)層的寬度
height:125px 是固定對(duì)聯(lián)層的高度
position:fixed 是對(duì)聯(lián)位置固定的意思
float:left;left 是對(duì)聯(lián)層的屬性，左側(cè)浮動(dòng)
left:1px 是對(duì)聯(lián)層距離左側(cè)的距離
top:150px 是對(duì)聯(lián)層距離上側(cè)的距離
此CSS代碼有個(gè)優(yōu)點(diǎn)，就是可以放到網(wǎng)頁html代碼的任何位置，調(diào)用起來相當(dāng)靈活而不受約束，如果想對(duì)聯(lián)出現(xiàn)快點(diǎn)，就把代碼放到網(wǎng)頁<body>之下，如果想對(duì)聯(lián)出現(xiàn)慢點(diǎn)，就把代碼放到網(wǎng)頁</body>之上。
此代碼已經(jīng)通過各種瀏覽器測(cè)試，Chrome、Firefox、IE等各種瀏覽器均有效。
您可能感興趣的文章
標(biāo)簽: 對(duì)聯(lián)
