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

JavaScript017

怎么用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)

})当鼠标离开的时候,图片还原为原来的尺寸

})

自己改一下 同事触发两个<p>标签就好

<!DOCTYPE html>

<html>

<head>

<title>字体变大变小</title>

<meta charset="UTF-8" />

<style type="text/css">

#txt {

font-size: 15px

}

</style>

</head>

<body>

<p id="txt">字体变大变小 </p>

<input type="button" id="btn1" value="A+" />

<input type="button" id="btn2" value="A-" />

<script type="text/javascript">

window.onload=function(){

var oTxt=document.getElementById("txt")

var oBtn1=document.getElementById("btn1")

var oBtn2=document.getElementById("btn2")

var num=15

oBtn1.onclick=function(){

if (num==20) {

num=20

}else{

num=num+1

}

oTxt.style.fontSize=num+"px"

}

oBtn2.onclick=function(){

if (num==12) {

num=12

}else{

num=num-1

}

oTxt.style.fontSize=num+"px"

}

}

</script>

</body>

</html>