javascript实现动态改变层大小的方法
更新时间：2015年05月14日 09:21:59 作者：永远爱好写程序
这篇文章主要介绍了javascript实现动态改变层大小的方法,涉及javascript操作页面属性的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
JSHint是一个社区驱动用来检测JavaScript代码中错误和潜在的问题以及执行团队的编码规范工具。它非常灵活,因此可以很容易地适应您特定的编码规则和你的代码执行环境。JSHint将永远保持开源的方式。2016-08-08
不错的应用，一般用于开发系统中，图片新闻，直接显示图片2008-08-08
下面小编就为大家带来一篇JS获取复选框的值,并传递到后台的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要介绍了Bootstarp在pycharm中的安装及简单的使用方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
IE8提示Invalid procedure call or argument 异常的解决方法
某台机器上，访问公司的好几个产品网站，都抛出很多 Invalid procedure call or argument ，跟进了下，情况最后简化为2012-09-09
这篇文章主要介绍了当关闭窗口的时候，显示窗口提示信息，友好的进行提示，防止丢失重要信息，需要的朋友可以参考一下2015-10-10
这篇文章主要介绍了如何利用 JS 脚本实现网页全自动秒杀抢购功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要给大家介绍了关于如何利用原生JavaScript实现造日历轮子的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JavaScript具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要为大家详细介绍了js实现计数器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
最新评论