Home > Web Front-end > JS Tutorial > body text

Javascript dynamic scaling fade out and fade in_javascript skills

WBOY
Release: 2016-05-16 18:55:38
Original
878 people have browsed it

//interval variable
var inl = [];
//original transparency
var opa = 100;
//determine browser
var ie = navigator.appName == "Microsoft Internet Explorer" ? "Microsoft Internet Explorer" : "";
//Reduce and open buttons
function gogo() {
speed = 50;
var mode;
//Use squares display to determine whether to reduce or enlarge
if(!$('tmp').style.display) {
mode = "-";
//If the display is normal, set the interval to reduce
inl['suotu'] = setInterval("suodi('-')", 10);
}else {
mode = " ";
//If the display is none, change the display back to normal first , then set the interval to enlarge
$('tmp').style.display = "";
inl['suotu'] = setInterval("suodi(' ')", 10);
}
clearInterval(inl['dcdr']);
inl['dcdr'] = setInterval("dcdr('" mode "')", 10);
}
//Fade out and in
function dcdr(op) {
//Get transparency
opa = define(op, opa, 4, 0, 100);
//Update transparency
ie ? $('tmp' ).style.filter = "alpha(opacity=" opa ")" : $('tmp').style.opacity = opa / 100;
//If the transparency is less than or equal to 0 or greater than or equal to 100
if (opa <= 0 || opa >= 100) {
//Stop 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;
}
//Reduce or enlarge
function suodi(opt) {
//If the speed is greater than 1, continue to divide by s, otherwise it is equal to 1
speed = speed > 1 ? speed * 0.862 : 1;
//Get the height
var hw = define(opt, $('tmp').clientHeight, speed, speed, 300);
//Set the height and width
$('tmp').style.height = hw "px";
$('tmp').style.width = hw "px";
//If the height of the block is less than the speed
if ($('tmp').clientHeight <= speed) {
//Hide box
$('tmp').style.display = "none";
//Button name changed to " Open"
$('anniu').value = "Open";
//Close interval
clearInterval(inl['suotu']);
}else if($('tmp' ).clientWidth >= 300) {
//Button name changed to "Reduce"
$('anniu').value = "Reduce";
//Close interval
clearInterval(inl ['suotu']);
}
}
//Simplify getElementById to $
var $ = function($) {
return document.getElementById($);
}
//interval variable
var inl = [];
//original transparency
var opa = 100;
//determine browser
var ie = navigator.appName == "Microsoft Internet Explorer" ? "Microsoft Internet Explorer" : "";
//Reduce and open button
function gogo() {
speed = 50;

var mode;
//Use the display of the block to determine whether to reduce or enlarge
if(!$('tmp').style.display) {
                                                                                                                       Set interval to narrow
inl['suotu'] = setInterval("suodi('-')", 10);
}else {
                                                                                                           First change the display back to normal, then set the interval to enlarge
$('tmp').style.display = "";
inl['suotu'] = setInterval("suodi(' ')", 10) ;
}
clearInterval(inl['dcdr']);
inl['dcdr'] = setInterval("dcdr('" mode "')", 10);
}
//Fade out and fade in
function dcdr(op) {
//Get transparency
opa = define(op, opa, 4, 0, 100);

//Update transparency
ie ? $('tmp').style.filter = "alpha(opacity=" opa ")" : $('tmp').style.opacity = opa / 100;

//If Transparency less than or equal to 0 or greater than or equal to 100
if(opa <= 0 || opa >= 100) {
//Stop interval
clearInterval(inl['dcdr']);
}
}
function define(id, a, b, a2, a3) {
if(id == "-") {
a -= b;
if(a < ;= a2) {
a = a2;
}
a = b;
if(a >= a3) {
a = a 3;
                                                                                                                   
//Reduce or enlarge
function suodi(opt) {
//If the speed is greater than 1, continue to divide by s, otherwise it is equal to 1
speed = speed > 1 ? speed * 0.862 : 1;

//Get height
var hw = define(opt, $('tmp').clientHeight, speed, speed, 300);
//Set height and width
$ ('tmp').style.height = hw "px";
$('tmp').style.width = hw "px";
//If the height of the block is less than the speed
if( $('tmp').clientHeight <= speed) {
//Hide box
$('tmp').style.display = "none";
//Button name changed to "Open "
$('anniu').value = "Open";
         //Close interval
clearInterval(inl['suotu']);
}else if($('tmp') .clientWidth & GT; = 300) {
// button name is changed to "reduced"
$ ('anniu'). Value = "shrink";
// Close the interval
Clearinterval 'suotu']);
}
}
//Simplify getElementById to $
var $ = function($) {
return document.getElementById($);
}









Demonstration




Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template