怎么用js实现图片点击时放大,再点击恢复

JavaScript033

怎么用js实现图片点击时放大,再点击恢复,第1张

用js实现图片点击时放大,再点击恢复的方法:

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支持主流浏览器