Javascript动态伸缩+淡出淡入

//interval变量 var inl = []; //原始透明度 var opa = 100; //判断浏览器 var ie = navigator.appName == "Microsoft Internet Explorer" ? "Microsoft Internet Explorer" : ""; //缩小和打开按纽 function gogo() { speed = 50; var mode; //利用方块的display来判定是否缩小或放大 if(!$('tmp').style.display) { mode = "-"; //display是正常的话设置interval缩小 inl['suotu'] = setInterval("suodi('-')", 10); }else { mode = "+"; //display是none的话先把display改回去正常，再设置interval放大 $('tmp').style.display = ""; inl['suotu'] = setInterval("suodi('+')", 10); } clearInterval(inl['dcdr']); inl['dcdr'] = setInterval("dcdr('" + mode + "')", 10); } //淡出淡入 function dcdr(op) { //获取透明度 opa = define(op, opa, 4, 0, 100); //更新透明度 ie ? $('tmp').style.filter = "alpha(opacity=" + opa + ")" : $('tmp').style.opacity = opa / 100; //如果透明度小于等于0或大于等于100 if(opa <= 0 || opa >= 100) { //停止interval clearInterval(inl['dcdr']); } } function define(id, a, b, a2, a3) { if(id == "-") { a -= b; if(a <= a2) { a = a2; } }else { a += b; if(a >= a3) { a = a3; } } return a; } //缩小或放大 function suodi(opt) { //速度大于1的话继续除以s，否则等于1 speed = speed > 1 ? speed * 0.862 : 1; //获取高度 var hw = define(opt, $('tmp').clientHeight, speed, speed, 300); //设定高度和宽度 $('tmp').style.height = hw + "px"; $('tmp').style.width = hw + "px"; //假如方块的高度小于速度 if($('tmp').clientHeight <= speed) { //隐藏方块 $('tmp').style.display = "none"; //按钮名字改为"打开" $('anniu').value = "打开"; //关闭interval clearInterval(inl['suotu']); }else if($('tmp').clientWidth >= 300) { //按钮名字改为"缩小" $('anniu').value = "缩小"; //关闭interval clearInterval(inl['suotu']); } } //简化getElementById为$ var $ = function($) { return document.getElementById($); } //interval变量 var inl = []; //原始透明度 var opa = 100; //判断浏览器 var ie = navigator.appName == "Microsoft Internet Explorer" ? "Microsoft Internet Explorer" : ""; //缩小和打开按纽 function gogo() { speed = 50; var mode; //利用方块的display来判定是否缩小或放大 if(!$('tmp').style.display) { mode = "-"; //display是正常的话设置interval缩小 inl['suotu'] = setInterval("suodi('-')", 10); }else { mode = "+"; //display是none的话先把display改回去正常，再设置interval放大 $('tmp').style.display = ""; inl['suotu'] = setInterval("suodi('+')", 10); } clearInterval(inl['dcdr']); inl['dcdr'] = setInterval("dcdr('" + mode + "')", 10); } //淡出淡入 function dcdr(op) { //获取透明度 opa = define(op, opa, 4, 0, 100); //更新透明度 ie ? $('tmp').style.filter = "alpha(opacity=" + opa + ")" : $('tmp').style.opacity = opa / 100; //如果透明度小于等于0或大于等于100 if(opa <= 0 || opa >= 100) { //停止interval clearInterval(inl['dcdr']); } } function define(id, a, b, a2, a3) { if(id == "-") { a -= b; if(a <= a2) { a = a2; } }else { a += b; if(a >= a3) { a = a3; } } return a; } //缩小或放大 function suodi(opt) { //速度大于1的话继续除以s，否则等于1 speed = speed > 1 ? speed * 0.862 : 1; //获取高度 var hw = define(opt, $('tmp').clientHeight, speed, speed, 300); //设定高度和宽度 $('tmp').style.height = hw + "px"; $('tmp').style.width = hw + "px"; //假如方块的高度小于速度 if($('tmp').clientHeight <= speed) { //隐藏方块 $('tmp').style.display = "none"; //按钮名字改为"打开" $('anniu').value = "打开"; //关闭interval clearInterval(inl['suotu']); }else if($('tmp').clientWidth >= 300) { //按钮名字改为"缩小" $('anniu').value = "缩小"; //关闭interval clearInterval(inl['suotu']); } } //简化getElementById为$ var $ = function($) { return document.getElementById($); } <body style="margin:0; padding:100px 150px" style="margin:0; padding:100px 150px"> <table style="border:1px solid #ccc" style="border:1px solid #ccc"> <tr> <td><div style="position:absolute; font-family:'微软雅黑'; font-size:13px" style="position:absolute; font-family:'微软雅黑'; font-size:13px"> 演示</div><div id="tmp" style="height:300px; width:300px; background:black"></div></td> </tr> <tr> <td align="center" style="padding-top:20px" style="padding-top:20px"> <input id="anniu" type="button" value="缩小" style="font-family:'微软雅黑'; font-size:12px; font-weight:bold; border:1px solid #ccc" style="font-family:'微软雅黑'; font-size:12px; font-weight:bold; border:1px solid #ccc" onfocus="this.blur()" onclick="gogo()"/> </td> </tr> </table> </body> 缩图演示 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　[推荐]javascript 面向对象技术基础教程

结果呢,看了大半天,有了一个大概的了解,细细一回味,好像什么都没懂... 这篇文章是参考<<javascript-the definitive guide,5th edition>>第7,8,9章而写成的,我也会尽量按照原书的结构来说明javascript的面向对象技>>>详细阅读

本文标题：Javascript动态伸缩+淡出淡入

地址：http://www.17bianji.com/kaifa2/JS/28951.html

1/2 1