Tips:javascript 图片放大和取得尺寸
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 图片放大和取得尺寸的更多相关文章
- 【荐】JavaScript图片放大技术(放大镜)示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript 点击图片放大功能
<!doctype html> <html> <head> <meta charset="utf-8" /> <title&g ...
- javascript仿新浪微博图片放大缩小及旋转效果
javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...
- 【前端】特效-Javascript实现购物页面图片放大效果
实现效果 实现代码: <!DOCTYPE html> <html> <head> <title>购物图片放大</title> <met ...
- JavaScript 实现用户点击图片放大
JavaScript 实现用户点击图片放大 一.契机 情况是这样的,之前推荐朋友去建站.后面他专门写了一篇文章说如何实现 "用户点击图片实现放大效果",俺就好好 "拜读& ...
- 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...
- 再谈javascript图片预加载技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
随机推荐
- 让页脚footer永远固定在页面的底部,而不是永远固定在显示器屏幕的底部的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- yii2 添加模块过程
本文以Yii2基本应用程序模板为例,介绍下向该框架下加入新模块的过程: 1. 新建模块相关目录与文件 step 1: 新建目录结构 首先在根目录下新建modules目录,然后在该目录下面添加模块目 ...
- state模式理解
state模式应用场景 条件判断很多的情况 比如有很多if else语句:switch case语句等等. 如果以后业务越来越复杂,条件判断有100多个,每种条件的处理逻辑很复杂,不止一个业务逻辑会重 ...
- mdf导入sqlServer
导入mdf有两种方法: (需要mdf和ldf两个文件) 1. 在SQL企业管理器中,选择左边树型列表,根节点即"数据库"的文件夹图标,右键"所有任务"→ ...
- win7下如何执行批处理文件
经过了一段时间的适应之后,某C也基本摸透了Win7的习性,然后突然发现无聊,就上了VeryCD去下载几个游戏玩.R大是电驴游戏版块的大神,某C怀着崇敬的心情,每每都追寻着他的足迹下载游戏.这次正好下载 ...
- Swift - 41 - swift1.2新特性(1)
更简洁的if-let import UIKit func attack(name: String, enemyName: String, weapon: String) { print("\ ...
- 在eclipse中运行wordcount,控制台打印log4j警告
log4j:WARN No appenders could be found for logger (org.apache.hadoop.util.Shell).log4j:WARN Please i ...
- 关于PHP伪静态Rewrite设置
Rewirte主要的功能就是实现URL的跳转和隐藏真实地址,基于Perl语言的正则 表达式规范.平时帮助我们实现拟静态,拟目录,域名跳转,防止盗链等 一.Apache配置: 1.支持httpd ...
- javascript控制图片等比例缩放
<SCRIPT language="JavaScript"> function DrawImage(ImgD,FitWidth,FitHeight){ var imag ...
- FCKEditor的用法(asp版)
1:下载FCKEditor 去www.baidu.com 搜索,我本来想上传的,但不知道怎么传.下载下来后解压到你网站的目录,最好就放在根目录下,文件夹名字就用FCKEditor:这里可以随便自己喜好 ...