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