• 365网络(Www.365NetWork.Cn)网络改变世界!
  • RSS订阅 加入收藏  设为首页
当前位置:首页 > 网页特效 > 广告代码

纯CSS(非JS)广告代码实现固定对联的方法 超短超实用!

时间:2018/7/24 0:12:53   作者:365网络   来源:www.365network.cn   阅读:157   评论:0
内容摘要:之前用JS实现对联漂浮,从而固定它不让它随滚动条往上移,不过用了后感觉效果不是很好,因为JS一直在计算对联的位置,然后对其移位,如果滚动条拉得快一点,对联会先出现在屏幕下方,然后在JS的作用下,移到设定的位置(距离上方有多少像素),这对网页浏览者的体验不是很好,有点晃眼。固定...
    之前用JS实现对联漂浮,从而固定它不让它随滚动条往上移,不过用了后感觉效果不是很好,因为JS一直在计算对联的位置,然后对其移位,如果滚动条拉得快一点,对联会先出现在屏幕下方,然后在JS的作用下,移到设定的位置(距离上方有多少像素),这对网页浏览者的体验不是很好,有点晃眼。固定对联,应该是让它丝毫不动的固定着才对。今天终于写了一个代码,是用纯CSS实现(非JS)代码实现固定对联,效果非常好。
    纯CSS(非JS)代码实现固定对联的方法
    实现代码如下:

<!--左侧对联-->
<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等各种浏览器均有效。

标签:广告 代码 实现 固定 对联 
分享到
免责声明:本网转载自合作媒体或其它网站的信息,登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。如因文章内容、版权和其它问题请及时与本网联系。365网络【Www.365NetWork.Cn】
上一篇:没有了
下一篇:没有了
意见建议 - 关于我们 - 联系我们 - 广告报价 - 免责声明 - 招贤纳士 - 网站地图 - WAP手机版 - 订阅本站 - 返回首页

Copyright © Wwww.365NetWork.Cn 2017-2019 Powered by 365网络 All Right Reserved.

国ICP备17005375号