1、页面定义区片区域:
<img src="Images/home.jpg" id="Img1" width="118" height="106" border="0">
<img src="Images/machine.jpg" id="Img2" width="118" height="106" border="0">
<img src="Images/title_Mixie.jpg" id="Img3" width="118" height="106" border="0">
2、定义js方法的mouseover和mouseout事件:
$(document).ready(function () {
$('#Img1, #Img2, #Img3').mouseover(function () {
$(this).animate({ width: "122px", height: "110px" }, 100)
})当鼠标放上去的时候,图片变大
$('#Img1, #Img2, #Img3').mouseout(function () {
$(this).animate({ width: "118px", height: "106px" }, 100)
})当鼠标离开的时候,图片还原为原来的尺寸
})
方法一:获取图片的宽高。可以用offsetWidth和offsetHeight
方法二:
你先获取img标签标签元素。用getElementById()或者getElementsByClassName或者getElementsByTagName()都可以。
获取之后,如果你的img图片有width和height 属性,可以直接用img元素对象点属性
document.getElementsByTagName("img")[0].width
document.getElementsByTagName("img")[0].height
3.如果img元素本身没有width和height属性。你可以获取img元素的style样式
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr]
};
obj是你的img标签对象,attr是你的想要获取的属性;
currentStyle支持IE低版本浏览器,
getComputedStyle支持主流浏览器