chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果
来源:互联网 发布:好的c语言集成开发环境 编辑:程序博客网 时间:2024/05/02 10:04
今天要做一个DIV随滚动条滚动的效果,本人记得08年写过几次,但是至今实在是写不出来,在群里朋友的帮助下,使用CSS达到了想要的效果。无奈在chrome下显示的效果不如人意。于是继续进行调整。需要注意的点如下:
1、父元素要相对定位
2、需要处理IE6不兼容的问题
3、left或 right控制,在窗口小化时,仍然可以看到悬浮的层
4、left或right的设置要设为百分比(比如下边我设置的是65%,但是这个百分比在IE6下可能出现不同于其他浏览器的效果,所以有可能需要对IE6单独设置一个百分比。)
5、重点代码:
position:fixed;
left:65%;/*解决chrome不兼容问题在于此处要用百分比*/
top:160px;
z-index:999;/*为了让DIV永远在最前面,不被其他元素遮住*/
_position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/
_top:expression(eval(document.documentElement.scrollTop+160));/*这里需要获取滚动高度+元素原本的高度*/
left:65%;/*解决chrome不兼容问题在于此处要用百分比*/
top:160px;
z-index:999;/*为了让DIV永远在最前面,不被其他元素遮住*/
_position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/
_top:expression(eval(document.documentElement.scrollTop+160));/*这里需要获取滚动高度+元素原本的高度*/
下面贴上代码,也可以点此下载案例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible"><!--据说这个可以只需要兼容IE7--><title>无标题文档</title><style type="text/css">*{margin:0; padding:0; border:0;}#d{ background:url(images/index_bg.jpg) repeat-y scroll center top transparent; left: 50%; margin-left: -500px; position: relative; width: 1000px; } .top,.main,.bottom,.fixed{text-align:center;}.top{ background-color:#C30; height: 101px; padding-top: 4px; }.main{ width:980px; margin:20px auto 0; background-color:#FC0; padding:10px;}.main .cont{height:900px;}.main .cont .contL,.main .cont .contR{ float:left;}.main .cont .contL{ width:750px; background-color:#93C; height:900px; margin-right:15px;}.main .cont .contR{ width:210px; background-color:#33F; height:500px; } .bottom{ background-color:#00F; clear: both; color: #373737; height: 192px; margin: 10px auto; overflow: hidden; padding-top: 20px; width: 1000px; }.fixed{ width:190px; line-height:40px; padding-top:20px; padding-bottom:20px; background-color:#999; position:fixed; left:65%; top:160px; z-index:999;/*为了让DIV永远在最前面,不被其他元素遮住*/ _position:absolute;/*这里开始的2句代码是为ie6不兼容position:fixed;而写的*/ _top:expression(eval(document.documentElement.scrollTop+160));/*这里需要获取滚动高度+元素原本的高度*/}</style></head><body> <div id="d"> <div class="top">我是头</div> <div class="main"> 我是主体<br /> 有多少内容,我就有多高<br /> <div class="cont"> <div class="contL"></div> <div class="contR"></div> </div> </div> <div class="bottom">我是脚</div> </div> <div class="fixed"> 我要随滚动条滚动<br /> 我要随滚动条滚动<br /> 我要随滚动条滚动<br /> </div></body></html>
- chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果
- 对联广告JS代码效果大全
- js对联广告效果全面兼容所有浏览器
- 对联效果的广告
- js 对联广告
- js 对联广告
- Js对联广告代码
- 对联广告js
- 对联广告js
- js广告对联
- 对联广告js
- 网页两边对联广告效果
- 对联广告代码效果大全
- 对联广告代码效果大全
- 对联广告代码效果大全
- 对联广告代码效果大全
- 对联广告代码效果大全
- JS对联广告(IE,FireFox)
- OSCashe教程总结(全)
- Blackberry Exchange Mailbox Database 访问权限问题
- hadoop 单机版 下的 NewMaxTemperature实现
- find命令–Linux
- 使用MasterPage(母版页)的ASP.NET Content(内容)页面添加CSS样式
- chrome不兼容position:fixed 对联广告JS 不用JS做对联广告效果 CSS实现对联广告效果
- link2sd或者app2sd前的分区——SD卡分区教程 link2sd教程 app2sd教程
- Websphere问题的点滴收集
- Message 'You cannot use the EurekaLog package in other packages'.
- Oracle时间函数(转)
- Android 2.2 API Demos -- PersistentState(Activity)
- 线程结束资源释放
- JUnit学习链接地址
- 单链表的反转实现(C++)