实用的层滑开js实现代码- Javascript - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 实用的层滑开js实现代码

Javascript: jQuery生成asp.net服务器控件的代码; javascript 实现的完全兼容鼠标滚轴缩放图片的代码; JavaScript学习笔记（十七）js 优化; 使用SyntaxHighlighter实现HTML高亮显示代码的方法; javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系; 利用jQuery 实现GridView异步排序、分页的代码; jquery.lazyload 实现图片延迟加载jquery插件; Lazy Load 延迟加载图片的 jQuery 插件; jquery 插件实现图片延迟加载效果代码; javascript小数计算出现近似值的解决办法; jquery1.4后 jqDrag 拖动不可用; jquery 应用代码方便的排序功能; 选择TreeView控件的树状数据节点的JS方法(jquery); jquery 图片Silhouette Fadeins渐显效果; JQuery Dialog(JS 模态窗口,可拖拽的DIV); javascript 同时在IE和FireFox获取KeyCode的代码; js 键盘记录实现(兼容FireFox和IE); javascript 函数速查表; jQuery AnythingSlider滑动效果插件; 经典海量jQuery插件大家可以收藏一下

No. « ‹ 283 284 285 286 › »

技术文章搜索

关键字

Javascript 中的实用的层滑开js实现代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 48 ::

收藏到网摘: n/a

纯JS图片批量预加载技术代码 jQuery get和post 方法传值注意事项

一款实用简洁的层滑开特效代码，鼠标放到“111”上，所对应的层会缓冲展开，过会会自动闭合起来，兼容性好，各位有用到的自己美化一下。

<!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=gb2312" />
<title>实用的滑开层代码</title>
<script>
var flag=0;
function f_s(id){
var obj=document.getElementById(id);
obj.style.display="block";
obj.style.height="1px";
var changeW=function(){
var obj_h=parseInt(obj.style.height);
if(obj_h<=160){
obj.style.height=(obj_h+Math.ceil((160-obj_h)/10))+"px";
}
else{
clearInterval(bw1);
}
}
bw1= setInterval(changeW,1); if(flag>0){ clearInterval(bw2); }
}
function closeW(id){ flag++;
var obj=document.getElementById(id);
var closeDiv=function(){
clearInterval(bw1);
var obj_h=parseInt(obj.style.height);
if(obj_h>1){
obj.style.height=(obj_h-Math.ceil(obj_h)/10)+"px";
}
else{
clearInterval(bw2);
obj.style.display="none";
}
}
bw2= setInterval(closeDiv,1);
}
function showDiv(){ var ele = document.getElementById("div1"); clearInterval(bw1); clearInterval(bw2); ele.style.display = "block"; ele.style.height = 160 + "px";
}
</script>
<style type="text/css">
</style>
</head>
<body>
<div class="c">
<ul>
<li onmouseover="f_s('div1')" onmouseout="closeW('div1')">111</li>
<li>222</li>
<li>333</li>
</ul>
</div>
<div id="div1" style="position:absolute;background:aqua;overflow:hidden;width:970px;display:none" onmouseover="showDiv()" onmouseout="closeW('div1')">000</div>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

纯JS图片批量预加载技术代码 jQuery get和post 方法传值注意事项

Javascript 中的 实用的层滑开js实现代码

评论 (0) All

Javascript 中的实用的层滑开js实现代码