本文介绍了一种使用纯CSS而非JS来实现对联固定的方法，解决了JS计算导致的对联晃动问题。通过设置position:fixed、left和top属性，实现了对联在页面中稳定显示的效果，无论滚动条如何移动。代码灵活，适用于不同浏览器，并提供了代码演示和解释。
之前用JS实现对联漂浮，从而固定它不让它随滚动条往上移，不过用了后感觉效果不是很好，因为JS一直在计算对联的位置，然后对其移位，如果滚动条拉得快一点，对联会先出现在屏幕下方，然后在JS的作用下，移到设定的位置(距离上方有多少像素)，这对网页浏览者的体验不是很好，有点晃眼。固定对联，应该是让它丝毫不动的固定着才对。今天终于写了一个代码，是用纯CSS实现(非JS)代码实现固定对联，效果非常好。
纯CSS(非JS)代码实现固定对联的方法
不多讲，先看演示效果吧：
实现代码如下：
代码解释：
width:125px 是固定对联层的宽度
height:125px 是固定对联层的高度
position:fixed 是对联位置固定的意思
float:left;left 是对联层的属性，左侧浮动
left:1px 是对联层距离左侧的距离
top:150px 是对联层距离上侧的距离
此CSS代码有个优点，就是可以放到网页html代码的任何位置，调用起来相当灵活而不受约束，如果想对联出现快点，就把代码放到网页
之下，如果想对联出现慢点，就把代码放到网页之上。此代码已经通过各种浏览器测试，Chrome、Firefox、IE等各种浏览器均有效。
您可能感兴趣的文章
扫一扫
3993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
