纯css实现无动跳随网页滚动代码(有demo)
2011-12-06 23:21:49   来源:   评论:0 点击:

网络上看到的大部分都是有滚动效果,但是美中不足就是层在滚动的时候发生跳动,像是卡壳了一样,这里介绍的是无跳动随网页滚动,兼容所有浏览器。 demo:点击预览前台的html代码非常的简洁:...
网络上看到的大部分都是有滚动效果,但是美中不足就是层在滚动的时候发生跳动,像是卡壳了一样,这里介绍的是无跳动随网页滚动,兼容所有浏览器。

demo:点击预览 

前台的html代码非常的简洁: 

<div id="sro">昆明多彩科技是<a href="http://www.kmwzjs.com">云南网站建设</a>专业的公司。</div>

css代码: 

#sro{width:90px;height:auto;position:fixed;z-index:2;border:1px solid #FB8511;background:#fff;_position:absolute;_top:expression(eval(document.documentElement.scrollTop));}

* html{background-image:url(about:blank);background-attachment:fixed;}

注意sro中的css样式的下划线_是为了兼容ie6浏览器(万恶的IE6),下面的* html也是为了防止层在滚动的时候发生跳动的情况发生。

该教程由多彩科技原创,转载请注明出处。

相关热词搜索:

上一篇:smarty3缓存设置原理和注意事项
下一篇:全局缓存策略和局部不缓存

分享到: 收藏
鄂ICP备11006399号
Website Design & Power by:hbyxx.net