js-图片的放大和缩小

最新推荐文章于 2024-06-03 14:12:29 发布

long冰

最新推荐文章于 2024-06-03 14:12:29 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/u011546421/article/details/52809666

版权

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

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>

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

long冰

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js-图片的放大和缩小

当鼠标点击放大按钮的时候，图片被放大，反之，点击缩小按钮时，图片被缩小1、行内样式代码的写法：http-equiv="Content-Type"content="text/html; charset=utf-8"/>无标题文档type="text/css">#box{width:200px;heig
复制链接

扫一扫