js-图片的放大和缩小

最新推荐文章于 2024-11-04 16:49:48 发布

原创最新推荐文章于 2024-11-04 16:49:48 发布 · 1.6k 阅读

CC 4.0 BY-SA版权

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

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

<!DOCTYPE html>

<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<style
type="text/css">

#box{

width:200px;

height:200px;

background-color:#66C;}

</style>

</head>

<body>

<input
type="button"
class="btn1"
value="放大"
onclick="document.getElementById('box').style.width='400px';document.getElementById('box').style.height='400px';"
/>

<input
type="button"
class="btn1"
value="缩小"
onclick="document.getElementById('box').style.width='100px';document.getElementById('box').style.height='100px';"
/>

<div
id="box"></div>

</body>

</html>

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

<!DOCTYPE html>

<head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<title>无标题文档</title>

<style
type="text/css">

#box{

width:200px;

height:200px;

background-color:#66C;}

</style>

<script
type="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>

<input
type="button"
class="btn1"
value="放大"
onclick="tobig()"
/>

<input
type="button"
class="btn1"
value="缩小"
onclick="tosmo()"
/>

<div
id="box"></div>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta
charset="UTF-8">

<title>放大缩小</title>

<style
type="text/css">

body{

padding:
50px;

}

.box{

width:
200px;

height:
200px;

background:
 red;

}

</style>

<script
type="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>

<div
class="box"
id="one"
onmouseover="bianda()"
onmouseout="bianx()"></div>

</body>

</html>