<!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> 上图红色处看不懂,请指点。
解决方案 »
- 关于sort()方法的问题
- 这段代码为什么不能实现滚动到页面底部?
- (20分求)动态添加表格元素设置id
- js 在 firefox下面使用 xmlhttprequest 对象调用方法open出错 错误: uncaught exception: (¹Õ XMLHttpRequest.open ö
- 网站被黑,尚无对策,求高手
- 模拟 在-->开始-->运行输入\\192.168.1.92回车 的操作
- 60分的简单问题,请高手进来,关于导航的单选问题!回答出来后,马上结帖!
- 如何真正实现打印页面时隐藏页眉和页脚以及 设置边框的边距?望高手解决!急!
- 求不出现任何提示,2秒后自动关闭窗口的代码!
- 实在没分了,还请大家多指教,另开贴100分
- 急急急!!!!
- 关于js验证表单提交的问题
ig.style.left=ig.offsetLeft+n+"px";
if(ig.offsetLeft+w <=0){
n:遍历时的取值;
px:n像素
对样式不是很熟,left,offsetleft自然是style中的内容了,具体的定义晓得的可以说明下
if(ig.offsetLeft+w <=0){ 我的意思是说,ig.offsetLeft+w不可能小于0.w是box的宽度,offsetLeft>=0.