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>