js图片放大缩小
2010-12-10 10:37
465 查看
最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有2个种方法实现:第一种方法可以兼容IE和火狐(其他的浏览器我没有测试);第二种方法只能兼容IE。
第一种方法很简单,代码如下:
第二种方法也简单,就是把中间的js方法改变一下,然后给图片框加上 style="zoom:100%;",如下
第一种方法很简单,代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Image.aspx.cs" Inherits="ImageZoom.Image" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> img { border:#000000 1px solid; } </style> <script language="javascript" type="text/javascript"> //兼容IE和火狐 function ImageChange(args) { var oImg = document.getElementById("img1"); if (args) { oImg.width = oImg.width * 1.2; oImg.height = oImg.height * 1.2; } else { oImg.width = oImg.width / 1.2; oImg.height = oImg.height / 1.2; } } </script> </head> <body> <form id="form1" runat="server"> <div> <img id="img1" alt="图片" src="images/img1.gif" mce_src="images/img1.gif"/> <br /> <input id="btn1" type="button" value="放大" onclick="ImageChange(true)" /> <input id="btn2" type="button" value="缩小" onclick="ImageChange(false)" /> </div> </form> </body> </html>
第二种方法也简单,就是把中间的js方法改变一下,然后给图片框加上 style="zoom:100%;",如下
var oImg = document.getElementById("img1"); oImg.style.zoom = parseInt(oImg.style.zoom) + (args ? +20 : -20) + '%';
相关文章推荐
- js中animate 的使用图片放大缩小效果
- js实现图片滚轮放大缩小以及鼠标拖动
- JS简单的图片放大缩小的两种方法
- JS网页图片查看器-可控制图片放大缩小还原移动效果
- js实现多张图片同时放大缩小相对位置不变
- 在线图片上传、预览、裁切、放大、缩小之 cropbox.js 的应用
- js两只手指控制div图片放大缩小功能(2)
- js滚轮控制图片的放大缩小
- JS简单的图片放大缩小的两种方法
- js动态放大缩小图片
- js图片拖拽查看并滑动鼠标可放大缩小
- JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
- 转:js图片放大缩小
- js实现图片缓慢放大缩小效果
- JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
- JS控制图片拖动 放大 缩小 旋转
- js按比例放大缩小图片
- js-图片的放大和缩小
- js模仿新浪微博查看图片放大缩小