Javascript动态伸缩+淡出淡入_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:42:13

Javascript动态伸缩+淡出淡入_javascript技巧

Javascript动态伸缩+淡出淡入_javascript技巧://interval变量 var inl = []; //原始透明度 var opa = 100; //判断浏览器 var ie = navigator.appName == Microsoft Internet Explorer Microsoft Internet Explorer : ; //缩小和打开按纽 function

推荐度：

点击下载本文 文档为doc格式

导读Javascript动态伸缩+淡出淡入_javascript技巧://interval变量 var inl = []; //原始透明度 var opa = 100; //判断浏览器 var ie = navigator.appName == Microsoft Internet Explorer Microsoft Internet Explorer : ; //缩小和打开按纽 function

//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($);
}

演示

//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($); 
}

</ script>

</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]