急 按键控制一个层

zjsyh 2011-08-16 12:30:09
我想做按钮或复选框控制一个层，如果点击按钮或选择复选框后，将层里边的按钮或输入框不可操作，再次点击或取消复选框，层里的东西可操作
...全文
121 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
zjsyh 2011-08-17
  • 打赏
  • 举报
 回复
有一段代码，不知道要怎么改了
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">
<!-- 图片列表 begin -->
<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>

<!-- 图片列表 end -->
</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',要在哪改代码呢
乌镇程序员 2011-08-16
  • 打赏
  • 举报
 回复 
<!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>
赢在执行 2011-08-16
  • 打赏
  • 举报
 回复
方法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>
zjsyh 2011-08-16
  • 打赏
  • 举报
 回复
谢谢各位啦
荷塘旁柳树下 2011-08-16
  • 打赏
  • 举报
 回复 
<!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>
zjsyh 2011-08-16
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 t5500 的回复:]
HTML code

<!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-……
[/Quote]
如果用遮罩怎么实现呢，我不知道怎么获取被遮层的位置
独立按键控制LED亮灭
本文介绍了如何使用独立按键控制LED灯的基本原理和技术细节，包括按键的接线方式、按键消抖的方法、控制LED灯的不同模式等，并探讨了二进制显示和移位控制的具体实现。
【stm32----按键中断实验，按键控制LED灯】
本文介绍了一个STM32按键中断实验，通过按键控制LED灯的亮灭。实验包括三个按键，每个按键控制一个LED灯的状态切换。文章详细介绍了实验的代码实现过程，包括头文件定义、初始化函数、中断处理函数等。
点亮一个LED以及按键控制
本文介绍了单片机中LED和按键的相关知识。先阐述LED的原理及发光实现方法，接着说明按键的原理和检测方式。重点讲解了按键控制LED的代码实现，以及因按键物理接触产生信号抖动的问题，通过添加延时函数实现软件消抖，避免错误识别。
FPGA学习之按键控制led
这篇博客介绍了一个FPGA设计案例，通过8个按键控制8个LED的亮灭。设计包括两个模块：按键缓存和LED控制。缓存模块使用二级缓存消除按键的尖峰脉冲，LED控制模块利用case语句根据按键值点亮相应的LED。测试文件提供了不同按键输入的仿真，以验证设计功能。
基于C51实现按键控制
本文详细介绍了基于STC89C52RC单片机实现独立按键和矩阵按键控制LED灯及数码管显示的实验过程。内容涵盖按键消抖原理、独立按键控制LED灯的电路分析与实现，以及矩阵按键通过行列扫描和线翻转法检测的原理与代码实现。实验展示了如何通过按键操作控制开发板上的LED和数码管，为51系列单片机的初级实践提供了清晰指导。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章