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 相关文章推荐
Javascript和Ajax中文乱码吐血版解决方案
Dec 21 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
jQuery实现HTML5 placeholder效果实例
Dec 09 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
JS验证不重复验证码
Feb 10 Javascript
webpack的CSS加载器的使用
Sep 11 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
使用Bootstrap做一个朝代历史表
Dec 10 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
详解JavaScript的this指向和绑定
Sep 08 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中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
node.js中的fs.futimesSync方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
jQuery实现自动滚动到页面顶端的方法
2015/05/22 Javascript
jQuery实现html元素拖拽
2015/07/21 Javascript
js如何判断输入字符串长度
2015/12/16 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
python多线程threading.Lock锁用法实例
2014/11/01 Python
Python实现感知机(PLA)算法
2017/12/20 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
利用Python如何画一颗心、小人发射爱心
2021/02/21 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
美国鲍勃商店:Bob’s Stores
2018/07/22 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
C#如何进行LDAP用户校验
2012/11/21 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
团日活动总结书格式
2014/05/08 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
人事专员岗位说明书
2014/07/29 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
银行稽核岗位职责
2015/04/13 职场文书