请问广告样,以及QQ在线咨询的效果,是如何实现的? 见http://www.lr783.com/showjs.asp?js_id=10
如题.
希望从CSS定位的角度来理解这样的效果是如何实现的.
[解决办法]
在线咨询的效果不光是CSS，
1 设置层position:absolute;z-index:100; 就可以对层的left, top定位。
2 在线咨询的left是固定的，即document.body.clientWidth(页面宽) - div.clientWidth（层宽）
3 高度随滚动条滚动的效果由onscroll事件触发，重新计算top的值，显然是top的当前值加上偏移量。
5 用document.body.scrollTop的当前值和上次触发的值计算偏移量;
<script>
var oldpos = 0;
function doit(){
var obj = document.getElementById( "pad ");
var newpos = document.body.scrollTop;
var delta = newpos - oldpos;
oldpos = newpos;
obj.style.top = parseInt(obj.style.top) + delta;
}
window.onload=function(){
var obj = document.getElementById( "pad ");
obj.style.left = document.body.clientWidth - obj.clientWidth;
document.body.onscroll = doit;
}
</script>
<div id= "pad " style= "position:absolute;z-index:100;background-color:red;width:100px;height:100px;top:100px;left:0px; "> </div>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br> a </br>
