1)获取图片尺寸

<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
//DOM属性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作样式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}

2)获取图片尺寸(不设置宽高)

<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)"/>
<script>
function getWH(t){
//DOM属性
console.log("width="+t.width);//200
console.log("height="+t.height);//300
//操作样式
console.log("styleWidth="+t.style.width);//空
console.log("styleHeight="+t.style.height);//空
}

我们只要不在style中显式地设置它,宽高永远为空!

3)放大图片:

这里我们利用了IE的私有属性防止图片放大失真严重!@司徒正美

<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
t.width *= 2;
t.height *= 2;
//每点击一次,宽高放大一倍
}
</script>

4)在FF与谷歌中,我们还可以用naturalWidth与naturalHeight取得图片的原大小!

<img src="http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg" alt="MM" title="MM(实际大小200*300)" onclick="getWH(this)" width="200" height="300"/>
<script>
function getWH(t){
console.log("width="+t.naturalWidth);
console.log("height="+t.naturalHeight);
t.width = t.naturalWidth * 2;
t.height = t.naturalHeight * 2;
}
</script>

naturalWidth和naturalHeight只是只读属性,不能用来设置图片的大小,不能持续放大。

附:MM.jpg  http://img.my.csdn.net/uploads/201309/03/1378223257_7957.jpg

Tips:javascript 图片放大和取得尺寸的更多相关文章

  1. 【荐】JavaScript图片放大技术(放大镜)示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JavaScript 点击图片放大功能

    <!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  4. 【前端】特效-Javascript实现购物页面图片放大效果

    实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...

  5. JavaScript 实现用户点击图片放大

    JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...

  6. 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  7. 再谈javascript图片预加载技术

    图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...

  8. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

随机推荐

  1. VC Windows系统服务创建代码

    Windows系统服务创建步骤,常用类封装,废话不多说,直接上代码 // ServceDemo.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" ...

  2. Swift函数的定义建议

    /* Swift中函数命名的智慧 */ // 1.一般情况下, 我们写一个函数是这么写的 func sayHello(name: String , greeting: String) { print( ...

  3. angularjs自定义日期过滤器,如:周日(前天 21:24)

    今天给大家分享一个,我在项目中自定义的一个日期过滤器.具体过滤出来的效果可参看下图: 用法: {{ time | timeFilter }} filter: App.filter('timeFilte ...

  4. 解决使用angularjs时页面因为{{ }}闪烁的两种方式ng-bind,ng-cloak

    1.HTML加载含有{{ }}语法的元素后并不会立刻渲染它们,导致未渲染内容闪烁(Flash of Unrendered Content,FOUC).我可以用ng-bind将内容同元素绑定在一起避免F ...

  5. Yum 安装 zabbix...

    环境:centos6_64 Mysql环境.禁用iptable selinux 安装基础包: 需要安装LAMP.自己安装吧...不会的请移步...LAMP rpm -ivh http://repo.z ...

  6. 转:初学者,手工注入测试方法小节 (出处:: 51Testing软件测试网--jie)

    1.加入单引号 ’提交,  结果:如果出现错误提示,则该网站可能就存在注入漏洞.    2.数字型判断是否有注入; 语句:and 1=1 ;and 1=2 (经典).' and '1'=1(字符型)  ...

  7. ionic初体验

    inoic使用入门安装inoic1.安装nodejs2.通过npm install -g iomic 在全局安装ionic3.通过ionic --help来查看帮助(其他命令详见弹出提示脚本) 后续收 ...

  8. 兄弟连面试宝典php

    学历这个事情是企业招聘经常设置的一道门槛,我们不能说学历高就能力高,也不能说学历低能力就差,那如何辩证回答这个问题呢?回答提示:学历不一定完全代表能力,虽然我的学历不够硬但是我会在技术上更努力更认真, ...

  9. 重构遗留程序的一次案例学习(java程序)

    遗留代码经常是腐臭的,每个优秀的开发者都想把它重构.而进行重构的一个理想的先决条件是,它应该包含一组单元测试用例,以避免产生回归缺陷.但是为遗留代码编写单元测试可不是件容易的事,因为它经常是一团糟.要 ...

  10. 健身计划_from85to75

    第一天没什么好写的,这半年也没看什么书,就写写未来的规划好了. 当然是从最简单的健身计划开始写咯. 关键词:弹性 目标:减肥,上肢力量 时间:3-4次/周(Thur,Fri,Sat,Sun),1h-1 ...