js设置 div长宽同比例缩放

JavaScript014

js设置 div长宽同比例缩放,第1张

设置25%后获取宽度值

var div = document.getElementById("div")

var widht = div.offsetWidth//宽度

var height = widht * 0.75//高度值

把高度给div即可

用jq 可以轻松实现 下面的代码是 移位 +放大, 再次点击时的代码自己加

<script src="/jquery/jquery-1.11.1.min.js">

</script>

<script> 

$(document).ready(function(){

  $("div").click(function(){

    $("div").animate({

      left:'250px',

      opacity:'0.5',

      height:'150px',

      width:'150px'

    })

  })

})

</script>

<script language="JavaScript">

function expandit(objname,objPic){

if(objname.style.display == "none"){

objPic.src = "<%=request.getContextPath() %>/images/-.gif"

objname.style.display = ""

}

else{

objPic.src = "<%=request.getContextPath() %>/images/+.gif"

objname.style.display = "none"

}

}

</script>

<table width="128" border="0" cellpadding="0" cellspacing="0"

bgcolor="#FFFFFF">

<tr>

<td width="135" height="25" align="left" style="cursor: hand"

onclick="expandit(treeitem1,treepic1)">

<img src="<%=request.getContextPath() %>/images/+.gif" id="treepic1" width="11" height="11"

hspace="5" border="0" />   <font color="blue">客户信息</font>

</td>

</tr>

<tr>

<td>

<table border="0" cellpadding="0" cellspacing="0"

bgcolor="#FFFFFF" width="100%" id="treeitem1"

style="display: none">

<tr align="right">

<td height="25">

<img src="" width="4" height="8" hspace="5" />

<a href="/FCKDemo/addNews.jsp?isOpen=true" target="contentpage">新闻添加</a>

</td>

</tr>

<tr align="right">

<td height="25">

<img src="" width="4" height="8" hspace="5" />

<a href="news/newslist.jsp" target="contentpage">新闻管理</a>

</td>

</tr>

</table>

</td>

</tr>

</table>

试试这种 感觉能比你的简单些吧