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程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript动态创建div的方法

    本文实例讲述了Javascript动态创建div的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xht

  • JavaScript动态创建div属性和样式示例代码

    1.创建div元素: Javascript代码 复制代码 代码如下: <scripttypescripttype="text/javascript"> functioncreateElement(){ varcreateDiv=document.createElement("div"); createDiv.innerHTML="Testcreateadivelement!"; document.body.appendChild(cr

  • JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i

  • JavaScript动态改变HTML页面元素例如添加或删除

    可以通过JavaScript动态的改变HTML中的元素 向HTML中添加元素 首先需要创建一个标签,然后向该标签中添加相应的内容,然后将创建好的标签添加到相应的位置. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht

  • JavaScript实现DIV层拖动及动态增加新层的方法

    本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法.分享给大家供大家参考.具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动层代码很流行,GG和YAHOO等大网站经常可以看到这种效果. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=

  • JavaScript动态改变div属性的实现方法

    本文实例讲述了JavaScript动态改变div属性的实现方法.分享给大家供大家参考.具体如下: 这里可以通过JS动态改变div属性,样式等 <script type="text/javascript"> var oBox = document.getElementById('box'); var oDiv = document.getElementById('div1'); var aInput = document.getElementsByTagName('input

  • JavaScript修改css样式style动态改变元素样式

    一.局部改变样式 分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N"写成"n",cssText也不能够把"T"写成"t",否则无法实现效果. 调用方法: 如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.cl

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

    本文实例讲述了javascript实现动态改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置层的大小</title>

  • javascript实现鼠标拖动改变层大小的方法

    本文实例讲述了javascript实现鼠标拖动改变层大小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动改变层的大小</title> <meta content="text/html; charset=gb2312" http-equiv="Content-Type"> <style> { box-sizing: border-box; moz-b

  • JavaScript简单实现动态改变HTML内容的方法示例

    JavaScript简单实现动态改变HTML内容的方法示例

    本文实例讲述了JavaScript简单实现动态改变HTML内容的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript:改变 HTML 内容</title> <script> function myFunction() { x = document.getElementById(

  • jQuery实现图片加载完成后改变图片大小的方法

    本文实例讲述了jQuery实现图片加载完成后改变图片大小的方法.分享给大家供大家参考,具体如下: 要改变图片的大小并不难,可以用jQuery操作css改变.但是前提是要判断图片是否加载完成.主要是通过jQuery的load事件和onreadystatechange来判断其状态. 对于IE6,用onreadystatechange可以直接处理,在IE7中,则需要用定时器来判断图片的readystate状态.而对于FF和Chrome刚可以直接用load事件来判断. 以下是在实例中使用的完整代码: <

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jquery实现动态改变css样式的方法分析

    本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个

  • JS动态改变浏览器标题的方法

    本文实例讲述了JS动态改变浏览器标题的方法.分享给大家供大家参考,具体如下: <!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" > <hea

  • jQuery动态修改字体大小的方法【测试可用】

    jQuery动态修改字体大小的方法【测试可用】

    本文实例讲述了jQuery动态修改字体大小的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 完整代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> * { margin:0; padding:0; } .msg

  • JS使用oumousemove和oumouseout动态改变图片显示的方法

    本文实例讲述了JS使用oumousemove和oumouseout动态改变图片显示的方法.分享给大家供大家参考.具体如下: 鼠标放到图片上时图片会自动变大,鼠标离开图片还原 <!DOCTYPE html> <html> <head> <script> function bigImg(x) { x.style.height="64px"; x.style.width="64px"; } function normalIm

  • js实现动态改变radio状态的方法

    h5的radio是自带选中状态改变的,但是如果自带的状态无法满足自己的需求时,就需要自己去实现. 代码如下: h5部分代码 <p class="group"> <label class="active"> <input type="radio" name="parent_radio" value="1" id="new_data" onclick="

随机推荐