高分求：一段js+div+css 渐入隐藏显示效果js！ 现在自己写的出现问题是：鼠标移至大div里头的小div也隐藏

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了高分求：一段js+div+css 渐入隐藏显示效果js！ 现在自己写的出现问题是：鼠标移至大div里头的小div也隐藏相关的知识，希望对你有一定的参考价值。

要求：1.鼠标移至“>>”，渐入显示一个大div；
2.鼠标移出大div隐藏大div；
3.大div里头包含了许多小div。
如图：

我的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="javascript" src="jquery.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

//-----------------------------

var slowObj;
var objWidth;
var objHeight;
var iter;
var operator;
var flag = true;
function SlowDiv2(tableId,operator2)
slowObj = $("#"+tableId);
if(flag)
objWidth = slowObj.width();
objHeight = slowObj.height();
flag = false;


slowObj.css("overflow":"hidden");
operator = operator2;
if(operator=="show")
slowObj.width(0);
slowObj.height(0);

iter = setInterval(operateTable,14);


function operateTable()
var tmpWidth = slowObj.width();
var tmpHeight = slowObj.height();
if(operator=="hide")
//隐藏table
if( (tmpWidth<=18 || tmpWidth-10<=0 ) & (tmpHeight<=18 || tmpHeight<=0))
var d = clearInterval(iter);
slowObj.hide();
return;
else
slowObj.width(tmpWidth-10);
slowObj.height(tmpHeight-10);
$("#ttest").val("-"+slowObj.width());


//$("#ttest").val(objWidth);
else
//显示table
slowObj.show();
if(tmpWidth+10>objWidth || tmpHeight+10>objHeight)
var d = clearInterval(iter);
slowObj.width(objWidth);
slowObj.height(objHeight);
return;
else
slowObj.width(tmpWidth+20);
slowObj.height(tmpHeight+2);
$("#ttest").val("+"+slowObj.width());

// $("#ttest").val(objWidth);



$(document).ready(function()
$("#S_switch").mouseover(function()
SlowDiv2("testTable","show");
$("#S_switch").focus(function()
$("#ttest").val("#S_switch");
);

).mouseout(function()
//alert("#S_switch out");
//SlowDiv2("testTable","show");
);

$("#testTable").mouseout(function()

// $("#ttest").val("table out");
SlowDiv2("testTable","hide");
).mouseover(function()

);
$("#testTable tr").mouseout(function()
//alert("tr out");
).mouseover(function()
//alert("tr over");
);
$("#testTable tr").css("background-color","pink");
);

</SCRIPT>

</HEAD>

<BODY>

<p id="S_switch" style="width:20px;background-color:gray;float:left;text-align:center;">
<b> >> </b>
</p>

<!-- div --->
<div style="width:302;height:200px;background-color:pink;display:none;" id="testTable" >
<div style="background-color:#123abc;width:100%">123213</div>

saf师大<br/>
1<br/>
1<br/>
</div>

</BODY>
</HTML>

参考技术A 把$("#testTable").mouseout改成$("#testTable").mouseleave

mouseout在鼠标移入子元素时也会触发，而mouseleave只会在鼠标移出本元素时触发

以下是完整代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript" src="jquery.js"></SCRIPT>

<SCRIPT LANGUAGE="JavaScript">

//-----------------------------

var slowObj;
var objWidth;
var objHeight;
var iter;
var operator;
var flag = true;
function SlowDiv2(tableId,operator2)
slowObj = $("#"+tableId);
if(flag)
objWidth = slowObj.width();
objHeight = slowObj.height();
flag = false;


slowObj.css("overflow":"hidden");
operator = operator2;
if(operator=="show")
slowObj.width(0);
slowObj.height(0);

iter = setInterval(operateTable,14);


function operateTable()
var tmpWidth = slowObj.width();
var tmpHeight = slowObj.height();
if(operator=="hide")
//隐藏table
if( (tmpWidth<=18 || tmpWidth-10<=0 ) & (tmpHeight<=18 || tmpHeight<=0))
var d = clearInterval(iter);
slowObj.hide();
return;
else
slowObj.width(tmpWidth-10);
slowObj.height(tmpHeight-10);
$("#ttest").val("-"+slowObj.width());


//$("#ttest").val(objWidth);
else
//显示table
slowObj.show();
if(tmpWidth+10>objWidth || tmpHeight+10>objHeight)
var d = clearInterval(iter);
slowObj.width(objWidth);
slowObj.height(objHeight);
return;
else
slowObj.width(tmpWidth+20);
slowObj.height(tmpHeight+2);
$("#ttest").val("+"+slowObj.width());

// $("#ttest").val(objWidth);



$(document).ready(function()
$("#S_switch").mouseover(function()
SlowDiv2("testTable","show");
$("#S_switch").focus(function()
$("#ttest").val("#S_switch");
);

).mouseout(function()
//alert("#S_switch out");
//SlowDiv2("testTable","show");
);

$("#testTable").mouseleave(function()

// $("#ttest").val("table out");
SlowDiv2("testTable","hide");
).mouseover(function()

);
$("#testTable tr").mouseleave(function()
//alert("tr out");
).mouseover(function()
//alert("tr over");
);
$("#testTable tr").css("background-color","pink");
);

</SCRIPT>

</HEAD>

<BODY>

<p id="S_switch" style="width:20px;background-color:gray;float:left;text-align:center;">
<b> >> </b>
</p>

<!-- div --->
<div style="width:302;height:200px;background-color:pink;display:none;" id="testTable" >
<div style="background-color:#123abc;width:100%">123213</div>

saf师大<br/>
1<br/>
1<br/>
</div>

</BODY>
</HTML>本回答被提问者和网友采纳 参考技术B <style type="text/css">
.fic_search #site-navpadding:0 14px 0 0;color:#fff;margin:10px 0 0 0;
.fic_search #site-nav .all acolor:#000; font-weight:bold;padding:0 10px 6px 0; float:left;
#site-navfloat:right;font-weight:normal;padding:5px 0 0 0;margin:0 8px 0 0;position: relative;
#site-nav .all abackground: url(ico01.gif) no-repeat right -422px;padding:0 10px 0 0
#site-nav .menu-bd display:none;position:absolute;top:20px;right:0;background:#fff
#site-nav .menu-bd ulborder: 1px solid #ccc; width:480px;padding:6px 10px;
#site-nav .menu-bd ul liwidth:120px;padding:4px 0
#site-nav .menu-bd ul li a display:block; color:#0049B4; text-decoration:underline
#site-nav .menu-bd ul li a:hovercolor:#FF3300
#site-nav .menu:hover .menu-bd display:block
#site-nav .hover .menu-bd display:block
</style>

<div class="fic_search">

<div id="site-nav">
<ul class="quick-menu">
<li>
<div class="menu">
<div class="all"><a title="浏览全部产品">浏览全部产品</A></div>
<div class="menu-bd">
<ul>
<li><a rel="nofollow" href="/product/file284.html">二极管</a></li>
<li><a rel="nofollow" href="/product/file291.html">LED</a></li>
<li><a rel="nofollow" href="/product/file462.html">显示屏/显示器件/配件</a></li>
<li><a rel="nofollow" href="/product/file636.html">三极管</a></li>
<li><a rel="nofollow" href="/product/file504.html">场效应管(模块)</a></li>
</ul>

</div>
</div>
</li>
</ul>
</div>

</div>

不用js 纯DIV 实现的 参考技术C 用jquery多简单 参考技术D 有点难度，需要有高手，哈哈~

js 点击隐藏显示问题

我用for循环显示的一些按钮并给他们name，然后点击它们的时候显示一个东西！就是不显示求大神解啊

你定义的a是全局变量，不管你点击的菜单是菜单一，还是菜单二都执行，不要这样写，直接加判断，点击菜单一时如果display是block就隐藏，否则显示

注：火狐和ie获取display的方法不同，用前先判断，要不不兼容
var CurrentStyle = function(e)
return e.currentStyle || document.defaultView.getComputedStyle(e, null);

if(CurrentStyle(document.getElementById(id))[\'display\']==\'none\')
document.getElementById(divName).style.display = "block";
else
document.getElementById(divName).style.display = "none";

希望对你能有所帮助。追问

但是我那要显示的里面有个隐藏按钮那个好使。。。。

 参考技术A js的话用 dispaly属性。 none为不显示， blok为显示。

Jqueyr的话用$('#id').hide();隐藏
$('#id').show();显示 参考技术B 你的按钮有绑定Click事件吗追问

js 读取事件中写 button.onclick = function()这种形式写的

追答

用这个io258ij 网友给你的回答，应该就可以了，你试试

追问

我那个要显示的里面有个隐藏按钮点击他的话能隐藏

以上是关于高分求：一段js+div+css 渐入隐藏显示效果js！ 现在自己写的出现问题是：鼠标移至大div里头的小div也隐藏的主要内容，如果未能解决你的问题，请参考以下文章

求一个JS控制DIV显示和隐藏

谁知道CSS怎样控制DIV隐藏

DIV，CSS如何实现“加减号”“显示隐藏”效果

求一个js函数显示和关闭div

JS 隐藏显示DIV

js 点击隐藏显示问题