js-图片的放大和缩小

来源：互联网发布：软件过程管理期末试卷编辑：程序博客网时间：2024/05/22 02:08

当鼠标点击放大按钮的时候，图片被放大，反之，点击缩小按钮时，图片被缩小

1、行内样式代码的写法：

<!DOCTYPE html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<styletype="text/css">
#box{
width:200px;
height:200px;
background-color:#66C;}
</style>
</head>
<body>
<inputtype="button"class="btn1"value="放大"onclick="document.getElementById('box').style.width='400px';document.getElementById('box').style.height='400px';"/>
<inputtype="button"class="btn1"value="缩小"onclick="document.getElementById('box').style.width='100px';document.getElementById('box').style.height='100px';"/>
<divid="box"></div>
</body>
</html>

2、使用嵌入式来写，引入函数的定义和调用函数

<!DOCTYPE html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>无标题文档</title>
<styletype="text/css">
#box{
width:200px;
height:200px;
background-color:#66C;}
</style>
<scripttype="text/javascript">
function tobig(){
document.getElementById('box').style.width='400px';
document.getElementById('box').style.height='400px';
}
function tosmo(){
document.getElementById('box').style.width='100px';
document.getElementById('box').style.height='100px';
}
</script>
</head>
<body>
<inputtype="button"class="btn1"value="放大"onclick="tobig()"/>
<inputtype="button"class="btn1"value="缩小"onclick="tosmo()"/>
<divid="box"></div>
</body>
</html>

3、鼠标经过时图片的放大缩小

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>放大缩小</title>
<styletype="text/css">
body{
padding:50px;
}
.box{
width:200px;
height:200px;
background: red;
}
</style>
<scripttype="text/javascript">
function bianda(){
var ob=document.getElementById('one');
ob.style.width='400px';
ob.style.height='400px';
ob.style.backgroundColor='green';
}
function bianx(){
var ob=document.getElementById('one');
ob.style.width='200px';
ob.style.height='200px';
ob.style.backgroundColor='red';
}
</script>
</head>
<body>
<divclass="box"id="one"onmouseover="bianda()"onmouseout="bianx()"></div>
</body>
</html>

以上三种代码都可以实现图片的缩小和放大，都是改变的是div的宽度width、高度height和背景backgroun属性

0 0