DIV+CSS页面对联浮动代码(无JS代码)

有时候我们需要实现随页面浮动的图片,网上有很多JS代码,但是它们却有个缺点,就是容易与页面中其他JS产生冲突,或者因为浏览器不兼容而造成页面显示出错。所以纯DIV+CSS代码就是一个最好的解决方案了。

下面这两段代码分别是CSS样式表和页面调用代码。

这段CSS代码放在<head></head>中间

<style type="text/css">
.r1{width:250px;height:50px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);right:20px;}
.r2{width:250px;height:50px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);right:20px;}
.l1{width:250px;height:50px;background:red;float:right;
position:fixed !important; top/**/:200px;
position:absolute; z-index:300; top:expression(offsetParent.scrollTop+200);left:20px;}
.l2{width:250px;height:50px;background:red;float:right;
position:fixed !important; top/**/:300px;
position:absolute; z-index:400; top:expression(offsetParent.scrollTop+300);left:20px;}
</style>


下面这段代码放在页面任何位置,就可以显示对联浮动效果。

<div class="r1"><a href="http://liboseo.com" target='_about'><img src="http://liboseo.com/logo.png" width="250" height="50" border="0" /></a></div>
<div class="r2"><a href="http://liboseo.com" target='_about'><img src="http://liboseo.com/logo.png" width="250" height="50" border="0" /></a></div>
<div class="l1"><a href="http://liboseo.com" target='_about'><img src="http://liboseo.com/logo.png" width="250" height="50" border="0" /></a></div>
<div class="l2"><a href="http://liboseo.com" target='_about'><img src="http://liboseo.com/logo.png" width="250" height="50" border="0" /></a></div>

“DIV+CSS页面对联浮动代码(无JS代码)”的2个回复

  1. 有时间研究一下,呵呵
    先谢过了

    回复:呵呵,不客气

评论已关闭。