`

不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

阅读更多

CSS代码:

.r1{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px;}
.r2{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);right:20px;}
.l1{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);left:20px;}
.l2{width:80px;height:80px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);left:20px;} 
 

页面代码:

<div class="r1"><a href="http://www.jb51.net" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="r2"><a href="http://www.jb51.net" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="l1"><a href="http://www.jb51.net" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>
<div class="l2"><a href="http://www.jb51.net" target='_about'><img src="/js/pic/piao-l-1.gif" width="80" height="80" border="0" /></a></div>

 

出处:源码网,www.codepub.com

 

分享到:
评论

相关推荐

    没有js的纯DIV CSS对联漂浮广告代码

    纯DIVCSS对联漂浮广告代码(无JS),源码网两侧漂浮。经测试,兼容IE6,IE7,Firefox浏览器。

    JS对联漂浮广告代码

    标题:JS对联漂浮广告代码 描述:很好的漂浮广告的JS代码,供大家参考学习。 在现代网页设计中,动态元素的运用可以显著提升用户体验和页面吸引力,其中,漂浮广告作为一项常见且有效的营销手段,被广泛应用于各类...

    css实现的对联广告代码

    本文章讨论的是使用纯CSS代码来实现网页中的对联广告,它强调兼容性,能够适应包括旧版的IE、Firefox(ff)以及Chrome(gg)在内的所有主流浏览器。这里的对联广告代码是通过CSS来定位和样式设置的,并且还提供了...

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    33:div+css显示对联带关闭代码下载 34:文字导航广告代码演示下载 35:文字滚动消息广告代码下载 36:大幅商品展示广告代码下载 37:TOP排列幻灯广告代码下载 38:下拉显示幻灯广告代码下载 39:文字上翻幻灯广告...

    html.rar_对联广告

    7. **兼容所有浏览器**:为了确保广告在不同的浏览器(如Chrome、Firefox、Safari、Edge等)中都能正常工作,我们需要编写跨浏览器兼容的代码。这可能涉及到使用特征检测库(如Modernizr)和提供备选方案,或者使用...

    jquery实现两边飘浮可关闭的对联广告

    CSS 代码定义了对联广告的基本样式,包括位置(通过 `position: absolute` 和 `left`/`right`),以及关闭按钮的样式。 然后,我们引入 jQuery 库并编写 JavaScript 代码来处理广告的显示、滚动和关闭功能: ```...

    程序天下:JavaScript实例自学手册

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

    《程序天下:JavaScript实例自学手册》光盘源码

    8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个链接打开两个地址 8.7 为链接提供下拉菜单 8.8 按钮链接 8.9 弹出鼠标所指的链接地址 8.10 链接的...

    XYCMS企业建站系统简洁版.rar

    本系统为XYCMS企业建站系统简洁版 ...其中还支持漂浮、对联广告管理,具有在线预览功能。 静态生成:商业版本支持静态生成管理,客户可以选择生成类别,类型。方便企业网站进行SEO优化。 览功能

Global site tag (gtag.js) - Google Analytics