DIV宽度自动缓慢变化
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>宽度缓慢变化</title>
<style>
#chg {
width: 200px;
height: 120px;
background-color: #390;
margin: auto;
} #btn {
width: 200px;
height: 30px;
background-color: #000;
margin: auto;
display: block;
cursor: pointer;
color: #FFF;
font-size: 12px;
text-align: center;
line-height: 30px;
font-weight: bolder;
}
</style>
</head>
<body>
<div id="chg"></div><br />
<div id="btn" onclick="$d3()">展开</div>
</body>
</html>
<script>
function $d1() {
var l = document.getElementById("chg");
var w = l.offsetWidth;
var maxw = 500; function chgws() {
w += 1;
if(w >= maxw) {
l.style.width = '500px';
clearInterval(iIntervalId);
} else {
l.style.width = w + 'px';
}
}
iIntervalId = setInterval(chgws, 10);
} function $d2() {
var m = document.getElementById("chg");
var n = m.offsetWidth;
var maxw = 500; function chgwh() {
n -= 1;
if(n <= 200) {
m.style.width = '200px';
clearInterval(iIntervalId);
} else {
m.style.width = n + 'px';
}
}
iIntervalId = setInterval(chgwh, 10);
} function $d3() {
var q = document.getElementById("chg");
var chgb = document.getElementById('btn');
if(chgb.innerHTML == "展开") {
chgb.innerHTML = "收缩";
$d1();
} else {
chgb.innerHTML = "展开";
$d2();
}
}
</script>
DIV宽度自动缓慢变化的更多相关文章
- 使用CSS3的“transition ”属性控制长宽度的缓慢变化
有时候我们可能会想要改变某个资源信息的长宽度,比如改变某个div的宽度,而且需要让这个宽度缓慢改变,而不是突然就改变了.这时候你可能会想到使用jquery的animate()函数,不过这个方法既得引用 ...
- JavaScript实现div宽、高自动缓慢拉伸
最近打算实现一个带有滤镜效果的地自动拉伸图片.发现使用css3浏览器兼容性得需要特别关注.这里我使用js实现了一个div边框自动拉伸和缩小.源码如下: <!DOCTYPE html>< ...
- div宽度随屏幕大小变化
题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...
- CSS实现超出DIV宽度文字自动隐藏并显示省略号
当文字超出DIV宽度时,超出的文字部分省略,并用显示省略号代替,css代码如下: div.ellipsis { padding-left: 5px; text-align: left; text-ov ...
- jquery动态改变div宽度和高度
效果体验:http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD X ...
- ODI 11g & 12c中缓慢变化维（SCD）的处理机制
缓慢变化维(Slowly changing Dimensions)指的是维表中的维度字段值会随着时间或业务调整,而在后续的分析中,历史数据仍然要使用旧的维度值,新的数据会使用当前维度值.在数据仓库建设 ...
- DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- (转载)html中div使用自动高度
为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你 ...
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
随机推荐
- BZOJ 3942: [Usaco2015 Feb]Censoring
Description 有两个字符串,每次用一个中取出下一位,放在一个字符串中,如果当前字符串的后缀是另一个字符串就删除. Sol KMP+栈. 用一个栈来维护新加的字符串就可以了.. 一开始我非常的 ...
- CodeVS 2845 排序的代价
Description 给你一个数列使他递增,交换两个元素的代价为两个数的和,最小化代价. Sol 置换群+离散化. 使一个数列恢复递增顺序,那么,他和他要到达的位置的数需要交换,这样就形成了一个置换 ...
- weiphp执行的流程
微信交互 1.用户与微信进行交互,交互的事件包括:回复公众号,扫描与公众号有关的二微码,关注(取消关注)公众号,在公众号里点击自定义菜单等 2.微信把用户的交互事件及相关参数传递给weiphp的微 ...
- ubuntu set ntpdate
1. 安装ntpdate工具 # sudo apt-get install ntpdate 2. 设置系统时间与网络时间同步 # ntpdate cn.pool.ntp.org 3. 将系统时间 ...
- css 旋转
div { transform:rotate(7deg); /*Internet Explorer 10.Firefox.Opera 支持 transform 属性*/ -ms-transform:r ...
- Unity3D 给模型偏移纹理
给模型偏移纹理 using UnityEngine; using System.Collections; [RequireComponent(typeof(Renderer))] public cla ...
- 基础01 dos命令
常见的dos命令: 盘符: 进入指定的盘下面. 操作文件夹: dir 列出当前控制 ...
- 7. javacript高级程序设计- 函数表达式
1. 函数表达式 1.1 函数定义 函数定义的方式有两种:一种是函数声明,另一种就是函数表达式. (1). 函数声明:函数声明的重要特征就是函数声明提示,函数声明会在函数执行前执行 function ...
- percona-toolkit 之 【pt-slave-delay】说明
摘要: 在主从复制的架构中,正常情况下主上操作的记录也会在从上进行操作,虽说是异步复制,但操作会“实时”的同步到从.比如在主上不小心误操作了,还没等反应过来从上也会马上执行误操作,后期只有通过二进制或 ...
- Java for LeetCode 217 Contains Duplicate
Given an array of integers, find if the array contains any duplicates. Your function should return t ...