Javascript动态伸缩+淡出淡入
发布时间:2024-06-22 02:57:21
//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>
<!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> </head> <script type="text/javascript" language="javascript" charset="gb2312"> //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 style="margin:0; padding:100px 150px"> <table style="border:1px solid #ccc"> <tr> <td><div style="position:absolute; font-family:'微软雅黑'; font-size:13px">&nbsp;演示</div><div id="tmp" style="height:300px; width:300px; background:black"></div></td> </tr> <tr> <td align="center" style="padding-top:20px"> <input id="anniu" type="button" value="缩小" style="font-family:'微软雅黑'; font-size:12px; font-weight:bold; border:1px solid #ccc" onfocus="this.blur()" onclick="gogo()"/> </td> </tr> </table> </body> </html>
猜你喜欢
- 前言本文将介绍如何使用ONNX将PyTorch中训练好的模型(.pt、.pth)型转换为ONNX格式,然后将其加载到Caffe2中。需要安装
- 前言在本文中,我们将设计一个可以执行算术运算的解释器。我们不会重新造轮子。文章将使用由 David M. Beazley 开发的词法解析器
- 在前端开发中,如果需要模拟后端数据,而又不想开发一个后端服务器, 则可以借助mock.js配置一个后端服务器来返回前端需要的数据,本文将会分
- 表结构如下:id varchar(32) info json数据:id = 1info = {&qu
- 一、定义(1)如果一个问题的规模是n,解这一问题的某一算法所需要的时间为T(n),它是n的某一函数 T(n)称为这一算法的“时间复杂性”。我
- 一、form介绍我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同
- 一、报错信息:【file】【Default Settint】---Project Interpreter 点击搜索suds安装模块报错解决:
- 如何用下拉列表显示数据库里的内容? 我们来看看实现这个功能的程序:<%Dim objDC, objRSS
- 开发中偶尔需要判断网络的连通性,没有什么方法比 ping 更直接了当,通常检查网络情况都是运行命令ping www.baidu.com ,查
- 一、内容简介本篇文章着重结合源码版本V3.2.20介绍Reactive和Ref。前置技能需要了解Proxy对象的工作机制,以下贴出的源码均在
- 把昨天做的高级查询界面完善了一下,支持动态添加多个查询条件、定义逻辑关系,支持整形、浮点、字符串、日期、布尔值、自定义选择列表的录入,通过E
- 1.关系模型:用二维表格结构表示实体集,外键表示实体间联系的数据模型称为关系模型。关系模型是由若干个关系模式组成的集合。2.关系模式:关系模
- 前言首先需要知道的是,js中有6个值为false,分别是: 0, '', null, undefined, NaN 和 fa
- 事情开始得很简单。MegaWare公司市场部门想要一个新的网站来发布文档,开发团队觉得使用SQL Server 2000数据库作为文档存储仓
- Windows下将gvim8配置为Python IDE大概分为以下四步,每步介绍的都非常详细,一起看看吧。1.准备工作将下面的安装包或者文件
- 这礼拜碰到一些问题,然后意识到基础知识一段时间没巩固的话,还是有遗忘的部分,还是需要温习,这里做份笔记,记录一下前续先简单描述下碰到的题目,
- 一、开发时管理数据库遇到的问题:现在开发一般都是团队开发,这样就会出现项目同步的问题,代码同步可以通过SVN工具管理起来,那数据库同步怎么办
- 来,考考大家一个问题,在 MySQL 中当某一列设置为 int(0) 时会发生什么 ?为了演示这个问题,我们先要创建一个表DROP TABL
- go-cqhttp安装一、 简介1、 介绍官方文档地址:https://docs.go-cqhttp.org/各种框架都只是机器人的各种实现
- 本文实例讲述了Python使用import导入本地脚本及导入模块的技巧。分享给大家供大家参考,具体如下:导入本地脚本import 如果你要导