发布于 2017-04-21 15:25:21 | 21 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


获取图片尺寸(不设置宽高)及放大图片:利用了IE的私有属性防止图片放大失真严重!感兴趣的朋友可以参考下
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只是只读属性,不能用来设置图片的大小,不能持续放大。


相关阅读 :
javascript 获取图片尺寸及放大图片
JavaScript获取图片的原始尺寸以宽度为例
JavaScript获取图片像素颜色并转换为box-shadow显示
JavaScript获取图片真实大小代码实例
javascript 获取图片颜色
JavaScript获取元素尺寸和大小操作总结
JavaScript怎么判断图片是否加载完成以便获取其尺寸
JavaScript获取网页中第一个图片id的方法
使用js获取图片原始尺寸
Javascript判断图片尺寸大小实例分析
JS获取图片实际宽高及根据图片大小进行自适应
javascript实现图片伪异步上传
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务