87,910
社区成员
发帖
与我相关
我的任务
分享看不懂代码
<!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">
<style type="text/css">
.obj{width:180px; height:300px; position:relative;}
.box{ width:160px; height:300px; border:1px solid #666666;}
.btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;}
</style>
<body>
<div id="obj" class="obj">
<div class="box" id="box"></div>
<div class="btn" onclick="set()" id="btn">点<br />我</div>
</div>
<script>
var ig=document.getElementById("obj");
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var w=box.offsetWidth; //边框宽度
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
ig.style.position ="fixed";
ig.style.zIndex='1000';
ig.style.left='0'+"px";
ig.style.top='100'+"px";
if(isIE6){
ig.style.position ="absolute";
ig._fixed = Bind(ig, function(){
ig.style.marginTop = document.documentElement.scrollTop + "px";
ig.style.marginLeft = document.documentElement.scrollLeft + "px";});
ig._fixed()
window.attachEvent("onscroll", ig._fixed); //当滚动时，保持相对位置
}
function set(){
if(ig.offsetLeft+w==0)
d(1);
else
d(-1);
}
function d(n){
var T=setTimeout("d("+n+")",1);
n=n<0?n-20:n+20
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w<=0){
clearTimeout(T);
ig.style.left=-w+"px";
btn.style.backgroundColor="#0000FF";
}
if(ig.offsetLeft>=0){
clearTimeout(T);
ig.style.left=0;
btn.style.backgroundColor="#FF0000";
}
}
</script>
</body>
</html>
上图红色处看不懂，请指点。
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
.obj{width:180px; height:300px; position:relative;}
.box{ width:160px; height:300px; border:1px solid #666666;}
.btn{ width:18px; height:60px; background:#F00; float:left; position:absolute; right:0; top:0; cursor:pointer;}
</style>
<body>
<div id="obj" class="obj">
<div class="box" id="box"></div>
<div class="btn" onclick="set()" id="btn">点<br />我</div>
</div>
<script>
var ig=document.getElementById("obj");
var box=document.getElementById("box");
var btn=document.getElementById("btn");
var w=box.offsetWidth; //边框宽度
var isIE = (document.all) ? true : false;
var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);
var Bind = function(object, fun) {
return function() {
return fun.apply(object, arguments);
}
}
ig.style.position ="fixed";
ig.style.zIndex='1000';
ig.style.left='0'+"px";
ig.style.top='100'+"px";
if(isIE6){
ig.style.position ="absolute";
ig._fixed = Bind(ig, function(){
ig.style.marginTop = document.documentElement.scrollTop + "px";
ig.style.marginLeft = document.documentElement.scrollLeft + "px";});
ig._fixed()
window.attachEvent("onscroll", ig._fixed); //当滚动时，保持相对位置
}
function set(){
if(ig.offsetLeft+w==0)
d(1);
else
d(-1);
}
function d(n){
var T=setTimeout("d("+n+")",1);
n=n<0?n-20:n+20
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w<=0){
clearTimeout(T);
ig.style.left=-w+"px";
btn.style.backgroundColor="#0000FF";
}
if(ig.offsetLeft>=0){
clearTimeout(T);
ig.style.left=0;
btn.style.backgroundColor="#FF0000";
}
}
</script>
</body>
</html>
上图红色处看不懂，请指点。
...全文
请发表友善的回复…
发表回复
August.Rush 2010-01-05
- 打赏
- 举报
那是像素大小的问题
灿烂阳光168 2009-12-29
- 打赏
- 举报
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w <=0){
我的意思是说，ig.offsetLeft+w不可能小于0.w是box的宽度，offsetLeft>=0.
if(ig.offsetLeft+w <=0){
我的意思是说，ig.offsetLeft+w不可能小于0.w是box的宽度，offsetLeft>=0.
cat_cook 2009-12-28
- 打赏
- 举报
设置id为obj的div的left属性：
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w <=0){
n:遍历时的取值；
px:n像素
对样式不是很熟，left,offsetleft自然是style中的内容了，具体的定义晓得的可以说明下
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w <=0){
n:遍历时的取值；
px:n像素
对样式不是很熟，left,offsetleft自然是style中的内容了，具体的定义晓得的可以说明下
