JS简单的图片放大缩小的两种方法

2015-04-27  来源:本站原创  分类:javascript技巧  人气:0 

这篇文章介绍了JS简单的图片放大缩小的两种方法,有需要的朋友可以参考一下

以左上角为定点,放大缩小,该点位置不变。

方法一:

Html代码

   <script type="text/javascript">
        //兼容IE和火狐   缩小放大、缩放
        function ImageSuofang(args) {
            var oImg = document.getElementById("oImg");
            if (args) {
                oImgoImg.width = oImg.width * 1.1;
                oImgoImg.height = oImg.height * 1.1;
            }
            else {
                oImgoImg.width = oImg.width / 1.1;
                oImgoImg.height = oImg.height / 1.1;
            }
        }
     </script> 

<form id="form1"> 

     <div class="pancontainer" data-orient="center" style="width:320px; height:480px;margin: 5px 300px 0px 400px;border: 1px solid #000;">
<img id="oImg" src="/img/c.jpg" alt="pic"/>
</div> 

             <input id="btn1" type="button" value="放大" onclick="ImageSuofang(true)" />
        <input id="btn2" type="button" value="缩小" onclick="ImageSuofang(false)" />
         <!--            <input type="button" value="<-Rotate逆时针" name="RotateL" id="RotateL" onclick="rotateRight('oImg',90);">  --> 

</form>

方法二:

CSS编码如下:

Css代码

复制代码 代码如下:

#biankuang{height:480px;width:320px;margin: 30px auto;}//加一个border可以看到定点为左上角。

下面是实现图片缩小放大功能的JS代码:

Js代码

复制代码 代码如下:

var zoomLevel = 0;
var currentWidth = 0;
var currentHeight = 0;
var originalWidth = 0;
var originalHeight = 0;
function initial(){
    currentWidth = document.myImage.width;
    currentHeight = document.myImage.height;
    originalWidth = currentWidth;
    originalHeight = currentHeight;
    update();
}
function zoomIn(){
    document.myImage.width = currentWidth*1.2;
    document.myImage.height = currentHeight*1.2;
    zoomLevel = zoomLevel + 1;
    update();
}
function zoomOut(){
    document.myImage.width = currentWidth/1.2;
    document.myImage.height = currentHeight/1.2;
    zoomLevel = zoomLevel - 1;
    update();
}
function resetImage(){
    document.myImage.width = originalWidth;
    document.myImage.height = originalHeight;
    zoomLevel = 0;
    update();
}
function update(){
    currentWidth = document.myImage.width;
    currentHeight = document.myImage.height;
    zoomsize.innerText = zoomLevel;
    imgsize.innerText = currentWidth + "X" + currentHeight;
}

html的body中的代码如下:

Html代码

复制代码 代码如下:

<body onload="initial()"> 

<div id="biankuang" data-orient="center">
<img name="myImage" src="/img/c.jpg" alt="pic"/>     //引入本地图片
</div> 

<p>
<input type="button" value="放大图片" onclick="zoomIn()">
<input type="button" value="缩小图片" onclick="zoomOut()">
<input type="button" value="重置图片" onclick="resetImage()">
<span id="zoomsize"></span> <span id="imgsize"></span></p>
</body>
相关文章
  • JS简单的图片放大缩小的两种方法 2015-04-27

    这篇文章介绍了JS简单的图片放大缩小的两种方法,有需要的朋友可以参考一下 以左上角为定点,放大缩小,该点位置不变. 方法一: Html代码 <script type="text/javascript"> //兼容IE和火狐 缩小放大.缩放 function ImageSuofang(args) { var oImg = document.getElementById("oImg"); if (args) { oImgoImg.width = oImg.w

  • js判断字符是否是汉字的两种方法小结 2014-12-30

    本篇文章主要是对js判断字符是否是汉字的两种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 有时需要判断一个字符是不是汉字,比如在用户输入含有中英文的内容时,需要判断是否超过规定长度就要用到.用 Javascript 判断通常有两种方法. 1.用正则表达式判断 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

  • js给onclick赋值传参数的两种方法 2015-01-14

    这篇文章主要介绍了js给onclick赋值传参数的两种方法,有需要的朋友可以参考一下 1)当方法没有参数时,赋值可以直接用onclick = 方法名 window.onload = function() { $('btnTest').onclick = test; } function test() { alert(val); } 2)当方法有参数时,用onclick = 方法名(参数)时就有错了,需要在方法名前面加function() 复制代码 代码如下: window.onload = fu

  • 鼠标移入移出事件改变图片的分辨率的两种方法 2014-02-09

    做一个鼠标移入移出图片事件,首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同,具体实现如下,感兴趣的朋友可以参考下 最近在做一个鼠标移入移出图片事件,有几种方法大家可以试一下 首先是改变分辨率的两种方法,鼠标移入图片和移出图片的分辨率不同 方法一 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" conten

  • node.js向ejs模板发送数据的两种方法 2013-07-16

    node.js中向ejs模板发送数据有以下两种方法: 方法一. 示例代码: res.render('viewName',{name1:'value1', name2:'value2',...}); 语法: res.render(view, [locals], callback); 说明: view:为模板文件名 locals:为模板中所有变量的key-value的JSON数据 callback:为回调函数 弊端:此方法在给模板赋值时,必须一次性将模板里的所有变量都传值,否则会报错. 方法二. 示

  • js 获取元素下面所有li的两种方法 2014-10-10

    这篇文章主要介绍了js如何获取元素下面所有的li,有哪些方法,需要的朋友可以参考下 js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li"); 或 复制代码 代码如下: var div=docum

  • js防止表单重复提交的两种方法 2015-03-03

    第一种:用flag标识,下面的代码设置checkSubmitFlg标志:第二种:在onsubmit事件中设置,在第一次提交后使提交按钮失效,感兴趣的朋友可以了解下 第一种:用flag标识,下面的代码设置checkSubmitFlg标志: <script language=""javascript""> var checkSubmitFlg = false; function checkSubmit(){ if(checkSubmitFlg ==true)

  • js实现双击图片放大单击缩小的方法 2014-10-21

    这篇文章主要介绍了js实现双击图片放大单击缩小的方法,涉及js操作图片及onclick与ondblclick事件的使用技巧,需要的朋友可以参考下 本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击

  • JS网页图片查看器(兼容IE.FF)可控制图片放大缩小移动 2014-12-29

    这是一个网上比较常用的JS网页图片查看器,可控制图片放大.缩小.还原.移动位置.拖动等操作,并且兼容IE浏览器和FF火狐浏览器,可以用在图片网站.地图网站等 修正了网上其它版本的一些错误.完美无错版 JS网页图片查看器-可控制图片放大缩小还原移动效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js实现图片放大缩小功能后进行复杂排序的方法 2015-01-10

    这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动 这是一个基于jquery的图片效果,它的作用是:当图片点击变大(变小)时,其它图片按照一定的规则进行排序运动. 首先来看下最终的效果图: 有人可能看到这个会觉得,这有什么难的,这么简单的事,楼主是不是太小提大作了?当你真正去尝试时,你才知道到底有什么难点. 首先,我们来讲下需求: 1.图片分为大小和小图,大图占四个小图的位置, 2.点击图片放大缩小, 重新排列顺序, 3. 当点击偶数列(

  • javascript 图片放大缩小功能实现代码 2014-03-03

    很早以前写的一个效果,今天有时间了整理出来 通过 Math.pow(x,y) 的"幂"运算来计算大小图片放大缩小的尺寸 看JS源码: // 放大缩小控制 var PhotoSize = { zoom: 0, // 缩放率 count: 0, // 缩放次数 cpu: 0, // 当前缩放倍数值 elem: "", // 图片节点 photoWidth: 0, // 图片初始宽度记录 photoHeight: 0, // 图片初始高度记录 init: function

  • js实现单击图片放大图片的方法 2014-07-22

    这篇文章主要介绍了js实现单击图片放大图片的方法,涉及javascript操作图片的技巧与onclick事件的用法,需要的朋友可以参考下 本文实例讲述了js实现单击图片放大图片的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>单击图片即可放大图片</title> <body> 点击图片预览效果.<br> <img src="/images/m01.jpg" onclick="this

  • Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动实现代码 2014-02-18

    Jquery与JS两种方法仿twitter/新浪微博 高度自适应无缝滚动的实现代码,需要的朋友可以参考下. 首先是Jquery 无标题文档 第一最好不相见,如此便可不相恋.第二最好不相知,如此便可不相思. 第三最好不相伴,如此便可不相欠.第四最好不相惜,如此便可不相忆. 作相思. 第一最好不相见,如此便可不相恋.第二最好不相知,如此便可不相思. 第三最好不相伴,如此便可不相欠.第四最好不相惜,如此便可不相忆. 第五最好不相爱, 不相对,如此便可不相会. 第七最好不相误,如此便可不相负.第八最好不

  • JS实现至少包含字母.大小写数字.字符的密码等级的两种方法 2014-04-07

    这篇文章主要介绍了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法,可实现有效检测用户密码等级的功能,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法.分享给大家供大家参考.具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示,让用户设置高级密码.那如何利用JS实

  • js简单的点击返回顶部效果实现方法 2014-05-29

    这篇文章主要介绍了js简单的点击返回顶部效果实现方法,实例分析了实现返回顶部效果的相关要点与实现技巧,需要的朋友可以参考下 本文实例讲述了js简单的点击返回顶部效果实现方法.分享给大家供大家参考.具体分析如下: 当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个"返回顶部"的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验. 实现原理:当页面加载的时候,把元素定位到页面的右下角,当页面滚动时,元素一直位于右下角,当用户点

  • js动态拼接正则表达式的两种方法 2015-03-08

    这篇文章主要介绍了js动态拼接正则表达式的两种方法,需要的朋友可以参考下 方法一: 做项目的时候可能会遇到用js验证表单输入正确性的需求,这时候就需要用到js的正则表达式.举个例子:比如说要验证月份,格式为:'yyyy-MM',这个正则表达式写起来很简单,实在写不出,也可以Google.百度一把,网上例子一大堆!但是js正则表达式就这样写死也会带来新的问题:如果配置文件的月份格式改了呢?改成'yyyyMM'.或者是'yyyy_MM'...呢??我们是不是要记得去把js中的正则表达式也跟着一遍遍的

  • js获取元素到文档区域document的(横向.纵向)坐标的两种方法 2013-10-24

    获取页面中元素到文档区域document的横向.纵向坐标,在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法 获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到

  • js判断url是否有效的两种方法 2013-11-17

    本篇文章主要是对js判断url是否有效的两种方法进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:(仅适用于ie) function CheckStatus(url) { XMLHTTP = new ActiveXObject("Microsoft.XMLHTTP") XMLHTTP.open("HEAD",url,false) XMLHTTP.send() return XMLHTTP.status==200 } function NetPi

  • 判断JS对象是否拥有某种属性的两种方式 2013-11-27

    这篇文章主要介绍了判断JS对象是否拥有某种属性的两种方式,有需要的朋友可以参考一下 两种方式,但稍有区别 1,in 运算符 var obj = {name:'jack'}; alert('name' in obj); // --> true alert('toString' in obj); // --> true 可看到无论是name,还是原形链上的toString,都能检测到返回true. 2,hasOwnProperty 方法 for in的缺陷

  • js原型继承的两种方法对比介绍 2014-02-01

    这篇文章主要介绍了js原型继承的两种方法对比介绍,需要的朋友可以参考下 在实际的项目中,我们通常都是用构造函数来创建一个对象,再将一些常用的方法添加到其原型对象上.最后要么直接实例化该对象,要么将它作为父类,再申明一个对象,继承该父类. 而在继承的时候有两种常用方式,今天我们就来稍作探讨 //父类 function Person(name){ this.name = name; }; // 子类 function Student(sex){ Person.apply(this,arguments