急按键控制一个层

我想做按钮或复选框控制一个层，如果点击按钮或选择复选框后，将层里边的按钮或输入框不可操作，再次点击或取消复选框，层里的东西可操作

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

方法1: onfocus=this.blur()
<input type="text" name="input1" value="中国" onfocus=this.blur()> 方法2:readonly
<input type="text" name="input1" value="中国" readonly> <input type="text" name="input1" value="中国" readonly="true"> 方法3: disabled
<input type="text" name="input1" value="中国" disabled>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript">
window.onload = function() {
document.getElementById('btn_controller').onclick = function() {
var inputs = document.getElementById('demo').getElementsByTagName('input');
for (var i = 0; i < inputs.length; i ++) {
if (inputs[i].disabled) inputs[i].disabled = false;
else inputs[i].disabled = true;
}
var textareas = document.getElementById('demo').getElementsByTagName('textarea');
for( var i = 0; i < textareas.length; i ++) {
if (textareas[i].disabled) textareas[i].disabled = false;
else textareas[i].disabled = true;
}
}
}
</script></head><body><input type="button" id="btn_controller" value="切换" />
<div id="demo">
<input type="text" value="文本框"  /><br  />
<textarea></textarea>
<input type="button" value="按钮" />
</div></body>
</html>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    #yourform{ width:300px; height:300px; background:#cfe; position:relative; }
    #shadelay{ width:300px; height:300px;  display: none; z-index:1; position: absolute;top: 0px; left: 0px; background:#efc; -moz-opacity: 0.3; opacity: 0.3; filter: alpha(opacity=30);}</style><script type="text/javascript">
    function Tab() {
        var layStatus = document.getElementById("shadelay").style.display;
        if (layStatus == "none" || layStatus == "") {

            document.getElementById("shadelay").style.display = "block";
        }
        else {
            document.getElementById("shadelay").style.display = "none";
        }
    }
</script></head><body><input type="button" value="切换" onclick="Tab()" /><div id="yourform">
  <div id="shadelay"></div>
  <input type="text" value="文本框"  /><br  />
  <textarea rows="5" cols="30" ></textarea> <br  />
  <input type="button" value="按钮" />
</div></body>
</html>
有一段代码，不知道要怎么改了
index.html代码
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS横向图片滚动</title>
<style>
.rollBox {
clear:both;
height:160px;
margin:0;
padding:10px 8px 0;
width:550px;
margin-top:80px;
margin-left:60px;
}
.rollBox .LeftBotton {
height:34px;
width:34px;
background:url(images/left.gif) no-repeat 0px 0;
overflow:hidden;
float:left;
display:inline;
margin:30px 0 0 0;
cursor:pointer;
}
.rollBox .RightBotton {
height:34px;
width:34px;
background:url(images/right.gif) no-repeat 0px 0;
overflow:hidden;
float:left;
display:inline;
margin:30px 0 0 0;
cursor:pointer;
}
.rollBox .Cont {
width:450px;
overflow:hidden;
float:left;
}
.rollBox .ScrCont {
width:10000000px;
}
.rollBox .Cont .pic {
width:150px;
float:left;
text-align:center;
}
.rollBox .Cont .pic img {
padding:1px;
background:#fff;
border:0px solid #ccc;
display:block;
margin:0 auto;
width:130px; height:130px;
}.rollBox #List1, .rollBox #List2 {
float:left;
}
</style>
<script type="text/javascript" src="js/move.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
<div class="rollBox">
<div class="LeftBotton"></div>
<div class="Cont" id="ISL_Cont">
    <div class="ScrCont">
      <div id="List1">
        
        <div class="pic"><img src="images/1.jpg" > </div>
        <div class="pic"><img src="images/2.jpg" > </div>
        <div class="pic"><img src="images/3.jpg" > </div>
        <div class="pic"><img src="images/4.jpg" > </div>
        <div class="pic"><img src="images/5.jpg" ></div>        
      </div>
      <div id="List2"></div>
    </div>
</div>
<div class="RightBotton"></div>
</div>
</body>
</html>
move.js代码
window.onload=function(){
var m=new move();
    m.auto_Speed=1000;//自动滚动时的速度
m.Speed = 10; //速度(毫秒){数值越大，速度越慢}
m.Space = 5; //每次移动(px)
m.PageWidth = 150; //翻页宽度
m.fill = 0; //整体移位
m.MoveLock = false;//判断是否要自动滚动
m.MoveTimeObj=null;//按钮控制
m.Comp = 0;
m.AutoPlayObj=null;//自动
m.start();
$('.LeftBotton').mousedown(function(){m.ISL_GoUp();});
$('.LeftBotton').mouseup(function(){m.ISL_StopUp();});
$('.LeftBotton').mouseout(function(){m.ISL_StopUp();});

$('.RightBotton').mousedown(function(){m.ISL_GoDown();});
$('.RightBotton').mouseup(function(){m.ISL_StopDown();});
$('.RightBotton').mouseout(function(){m.ISL_StopDown();});
}function move(){
this.auto_Speed=1000;//自动滚动时的速度
this.Speed = 5; //速度(毫秒){数值越大，速度越慢}
this.Space = 5; //每次移动(px)
this.PageWidth = 150; //翻页宽度
this.fill = 0; //整体移位
this.MoveLock = false;//判断是否要自动滚动
this.MoveTimeObj;//按钮控制
this.Comp = 0;
this.AutoPlayObj = null;//自动
var _this=this;

this.start=function(){
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = this.fill;
GetObj("ISL_Cont").onmouseover = function(){
clearInterval(this.AutoPlayObj);
}
GetObj("ISL_Cont").onmouseout = function(){
   _this.AutoPlay();
}

_this.AutoPlay();
}

this.AutoPlay=function(){ //自动滚动
clearInterval(this.AutoPlayObj);
this.AutoPlayObj = setInterval(function(){_this.ISL_GoDown();_this.ISL_StopDown();},this.auto_Speed); //间隔时间
}

this.ISL_GoUp=function(){ //左翻开始
   if(this.MoveLock) return;
   clearInterval(this.AutoPlayObj);
   this.MoveLock = true;
   this.MoveTimeObj = setInterval(function(){_this.ISL_ScrUp();},this.Speed);
}

this.ISL_StopUp=function(){ //左翻停止
   clearInterval(this.MoveTimeObj);
   if(GetObj('ISL_Cont').scrollLeft % this.PageWidth - this.fill != 0){
  this.Comp = this.fill - (GetObj('ISL_Cont').scrollLeft % this.PageWidth);
  this.CompScr();
   }else{
  this.MoveLock = false;
   }
   this.AutoPlay();
}

this.ISL_ScrUp=function(){ //左翻动作
if(GetObj('ISL_Cont').scrollLeft <= 0){
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth;
}
GetObj('ISL_Cont').scrollLeft -= this.Space ;
}

this.ISL_GoDown=function(){ //右翻
clearInterval(this.MoveTimeObj);
if(this.MoveLock) return;
clearInterval(this.AutoPlayObj);
this.MoveLock = true;
this.ISL_ScrDown();
this.MoveTimeObj = setInterval(function(){_this.ISL_ScrDown()},this.Speed);
}

this.ISL_StopDown=function(){ //右翻停止
clearInterval(this.MoveTimeObj);
if(GetObj('ISL_Cont').scrollLeft % this.PageWidth - this.fill != 0 ){
   this.Comp = this.PageWidth - GetObj('ISL_Cont').scrollLeft % this.PageWidth + this.fill;
   this.CompScr();
}else{
   this.MoveLock = false;
}
this.AutoPlay();
}

this.ISL_ScrDown=function(){ //右翻动作
if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){
GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
}
GetObj('ISL_Cont').scrollLeft += this.Space ;
}

this.CompScr=function(){
   var num;
   if(this.Comp == 0){
   this.MoveLock = false;return;
   }
   if(this.Comp < 0){ //左翻
  if(this.Comp < -this.Space){
  this.Comp += this.Space;
  num = this.Space;
  }else{
  num = -this.Comp;
  this.Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft -= num;
  setTimeout(function(){_this.CompScr()},this.Speed);
}else{ //右翻
if(this.Comp > this.Space){
this.Comp -= this.Space;
num = this.Space;
}else{
num = this.Comp;
this.Comp = 0;
}
GetObj('ISL_Cont').scrollLeft += num;
setTimeout(function(){_this.CompScr()},this.Speed);
}
}
}
function GetObj(objName){
if(document.getElementById){
return eval('document.getElementById("'+objName+'")');
}else{
return eval('document.all.'+objName);
}
}
我想把代码改一下，但还是实现此效果，将List2的style的display属性改为none，去掉ScrCont层的宽度，因为加上它太不好控制了，如果图片滚动到List2时，让display="",然后List1的display='none',要在哪改代码呢

急 按键控制一个层

解决方案 »

急按键控制一个层