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 ...
随机推荐
- 各版本IIS安装方法
各版本IIS安装方法 Windows 2000 V5.0 将操作系统安装光盘放入光驱,打开“控制面板”→“添加或删除程序”→“添加/删除 Windows 组件”,勾选“Internet信息服务(I ...
- FineUI页面级别的参数配置
Theme: 控件主题,目前支持三种主题风格(blue/gray/access,默认值:blue) Language: 控件语言(en/zh_CN/zh_TW/...,默认值:zh_CN) FormM ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
- 关于导出oracle多个表的建表语句DLL,生成.sql语句。
--('TABLE','LINE','ODS_XX')这里面的表和用户都需要大写.如果表名用户名不大写会报这个错误:对象 "emp" 属于类型 TABLE, 在方案 "s ...
- 关于oracle dblink的知识。
create database link WZGLconnect to MMCSG_GX(用户名)using '(description=(address_list=(address=(host=xx ...
- ueditor从excel粘贴过来的表格不显示问题
这是设置表格边框可见的办法
- kafak 命令使用
本篇文章主要内容: kafka常用命令总结 一.kafka常用命令总结: 1.创建topic bin/kafka-topics.sh --create --zookeeper ip:port/chro ...
- 用c#在Access数据库中创建新表
生成表NewTable,该表有文本字段Field1和整型字段Field2 private void CreateNewTable() { OleDbConnection conn = new ...
- [转] c#多线程(UI线程,控件显示更新) Invoke和BeginInvoke 区别
如果只是直接使用子线程访问UI控件,直接看内容三,如果想深入了解从内容一看起. 一.Control.Invoke和BeginInvoke方法的区别 先上总结: Control.Invoke 方法 (D ...
- win7禁止自动使用浏览器打开FTP而是用资源管理器
Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\ftp] @="URL:File Transfer Protocol" ...