javascript实现动态改变层大小的方法


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript实现动态改变层大小的方法。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态设置层的大小</title>
<style type="text/css">
.divMain
{
  width:10px;
  height:100px;
  border-style:solid;
  border-width:1px;
  border-color:Green;
  display:none;      
}
</style>
<script type="text/javascript">
var setIntervalID;
function ZoomDiv() {
  var divMain = document.getElementById("divMain");
  divMain.style.width = "200px";
  divMain.style.height = "200px";
}
function ShowDiv() {
  setIntervalID = setInterval("inc()", 100);
}
function inc() {
  var divMain = document.getElementById("divMain2");
  //div不能设置class,否则使用divMain.style.width取到的值时空的
  //只能在元素里设置style="width:10px;height:100px"
  var oldWidth = divMain.style.width;
  var oldHeight = divMain.style.height;
  oldWidth = parseInt(oldWidth);
  oldHeight = parseInt(oldHeight);
  oldWidth += 1;
  oldHeight += 1;
  if (oldWidth >= 200) {
    //清除定时器
    clearInterval(setIntervalID);
    return;
  }
  divMain.style.width = oldWidth + "px";
  divMain.style.height = oldHeight + "px";
}
</script>
</head>
<body>
<input type="button" value="放大层" onclick="ZoomDiv()" />
<input type="button" value="动态放大层" onclick="ShowDiv()" />
<div id="divMain" class="divMain">
案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
</div>
<!--这里不能设置class,否则使用divMain.style.width取到的值时空的-->
<div id="divMain2" style="width:10px;height:100px;background-color:Red;">
案例:跟着鼠标飞的图片。提示:鼠标移动的事件时onmousemove,通过
window.event的clientX,clientY属性获得鼠标的位置
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
麦鸡的TAB切换功能结合了javascript和css
Dec 17 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
js中生成map对象的方法
Jan 09 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
js实现左右轮播图
Jan 09 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
javascript鼠标滑动评分控件完整实例
May 13 #Javascript
javascript实现链接单选效果的方法
May 13 #Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
May 13 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
JavaScript页面刷新与弹出窗口问题的解决方法
2010/03/02 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
浅谈javascript中的闭包
2015/05/13 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
JavaScript中Date对象的常用方法示例
2015/10/24 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
前端性能优化建议
2020/09/17 Javascript
Vue 实现拨打电话操作
2020/11/16 Javascript
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
django开发post接口简单案例,获取参数值的方法
2018/12/11 Python
python使用正则表达式(Regular Expression)方法超详细
2019/12/30 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
苹果Mac升级:MacSales.com
2017/11/20 全球购物
Lookfantastic瑞典:英国知名美妆购物网站
2018/04/06 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
售后求职信范文
2014/03/15 职场文书
教师中国梦演讲稿
2014/04/23 职场文书
教师个人读书活动总结
2014/07/08 职场文书
珍爱生命主题班会
2015/08/13 职场文书
团结友爱主题班会
2015/08/13 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
css3新特性的应用示例分析
2022/03/16 HTML / CSS