这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现图片放大缩小的方法, 结合实例形式分析了 javascript 动态操作页面元素属性的相关技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现图片放大缩小的方法。分享给大家供大家参考,具体如下:
最近经常看见有人问怎样放大和缩小图片,我之前也做过一次,下面就把我的方法共享出来。我有 2 个种方法实现:第一种方法可以兼容 IE 和火狐 (其他的浏览器我没有测试);第二种方法只能兼容 IE。
第一种方法很简单,代码如下:
- <%@ 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) + '%';
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0615/327625.html