点击按钮,缩放图片(img.width、img.style.width、img.offsetWidth)
前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http://www.imooc.com/video/1111;
最开始想着按照视频使用定时器的思路来写,但是写到后面发现使用 img.width实现不了效果,然后就按照传参的思路来写,同样使用 img.width实现不了效果,所以后面改用img.style.width;我这等小白在这问题上纠结了好久,简直是要哭晕在厕所的节奏。
一、 使用img.style.width;
HTML部分比较简单:但还是需要贴出来,以便于后面说明为什么使用img.width没有出现效果,(特别注意img标签中对其宽高的写法)
<div id="div" style="width: 200px;height: 164px;">
<img style="width: 200px;height: 164px;" src="img/child.jpg" id="img" />
</div>
<input type="button" name="" id="big" value="放大" />
<input type="button" name="" id="small" value="缩小" />
JS部分
1、使用传参的方式,因为代码比较简单,就直接贴了 ,这里使用的都是.style.width形式
window.onload = function() {
var big = document.getElementById('big');
var small=document.getElementById('small')
big.onclick = function() {
chang(1.2,2,0.5)
}
small.onclick = function() {
chang(0.8,2,0.5)
}
}
function chang(speed,max,min) {
var div= document.getElementById('div');
var pic = document.getElementById('img');
var h = pic.offsetHeight;
var w = pic.offsetWidth;
var maxH=div.offsetHeight*max;
var maxW=div.offsetWidth*max;
var minH=div.offsetHeight*min;
var minW=div.offsetWidth*min;
if (h<=maxH&&h>=minH) {
pic.style.height = h*speed+"px";
pic.style.width=w*speed+'px';
}else if(h>maxH){
alert('图片已放到最大')
pic.style.height=maxH+"px";
pic.style.width=maxW+"px";
}else{
alert('图片缩到最小')
pic.style.height=minH+"px";
pic.style.width=minW+"px";
}
}
2、使用定时器:同样使用的使用的都是.style.width形式
window.onload = function() {
var big = document.getElementById('big');
var small = document.getElementById('small')
big.onclick = function() {
changBig()
}
small.onclick = function() {
changSmall()
}
var div = document.getElementById('div');
var pic = document.getElementById('img');
var endH = div.offsetHeight * 1.2;
var endW = div.offsetWidth * 1.2;
var maxH = div.offsetHeight * 2;
var maxW = div.offsetWidth * 2;
var endH1 = div.offsetHeight * 0.8;
var endW1 = div.offsetWidth * 0.8;
var minH = div.offsetHeight * 0.5;
var minW = div.offsetWidth * 0.5;
var changBig=function () {
if(pic.offsetHeight <endH ) {
if(pic.offsetHeight <maxH) {
pic.style.height = pic.offsetHeight * 1.08 + 'px';
pic.style.width = pic.offsetWidth * 1.08 + 'px';
} else {
alert('图片已放到最大')
clearInterval(time)
}
} else {
clearInterval(time)
}
var time = setInterval('changBig()', 200)
}
var changSmall=function () {
if(pic.offsetHeight > endH1 ) {
if(pic.offsetHeight >minH) {
pic.style.height = pic.offsetHeight * 0.9 + 'px';
pic.style.width = pic.offsetWidth * 0.9 + 'px';
} else {
alert('图片已缩到最小')
clearInterval(time)
}
} else {
clearInterval(time)
}
var time = setTimeout('changBig()', 200)
}
}
但老师的教学视频使用的是img.width,并且也有效果啊,为什么我使用img.width就不出现效果呢,在网上找了好久也没找到什么有关的,所以后面就在控制台上输出了他们:
console.log(pic.style.height);
console.log(pic.offsetHeight);
console.log(pic.height);
结果如下:
发现console.log(pic.offsetHeight)与console.log(pic.height)的结果一样;之前知道pic.style.height是可读可写的,为字符串,带有单位像素,而pic.offsetHeight是可读不可写的,难道console.log(pic.height)与console.log(pic.offsetHeight)是一样的?那也不应该啊,以为pic.offsetHeight是可读不可写的,如果他们是一样的,那么老师使用img.width应该也是不能出现效果的,所以他们肯定是不同的,想来他是结合了pic.style.height和pic.offsetHeight,可读可写,同时返回的是数字;那为什么我使用img.width就是不出现效果呢,后来猜想可能是HTML书写方式的不同导致的,所以修改了img标签内宽高的写法:如下
<div id="div" style="width: 200px;height: 164px;">
<img src="img/child.jpg" id="img" width="200" height="164"/>
</div>
<input type="button" name="" id="big" value="放大" />
<input type="button" name="" id="small" value="缩小" />
注意img标签对其宽高属性的两种写法;
然后我把JS部分的pic.style.height改为pic.height,然后效果就出来了,代码如下:
function chang(speed,max,min) {
var div= document.getElementById('div');
var pic = document.getElementById('img');
var maxH=div.offsetHeight*max;
var maxW=div.offsetWidth*max;
var minH=div.offsetHeight*min;
var minW=div.offsetWidth*min;
if (pic.offsetHeight<=maxH&&pic.offsetHeight>=minH) {
pic.height = pic.height*speed;
pic.width=pic.width*speed;
}else if(pic.height>maxH){
alert('图片已放到最大')
pic.height=maxH;
pic.width=maxW;
}else{
alert('图片缩到最小')
pic.height=minH;
pic.width=minW;
}
}
同样将用定时器写法中的pic.style.height改为pic.heigh,也出现了效果;代码就不贴出来了
之前只是怀疑pic.height与pic.offsetHeight是不相同的,那他们到底是否相同呢,然后将pic.heigh均改为pic.offsetHeight,这小效果没有了,所以这两者是、本质是不同的,只是他们的数值相同而已;
总结:
1、pic.height,pic.style.height,pic.offsetHeight三者是不同的;
2、pic.height,pic.style.height是可读可写的,pic.offsetHeight是可读不可写的;
3、pic.height与pic.offsetHeight返回的是数值,且数值相等;
4、pic.style.height返回的是字符串,带有单位PX;
5、使用pic.height还是使用pic.style.height,根据HTML中编写标签内的属性的方式而定;
最后,对于这个问题,小白的我弄了好久,写出来为了让自己影响深刻点,总结的也不全面,后面理解的深了,继续加吧。fighting!
点击按钮,缩放图片(img.width、img.style.width、img.offsetWidth)的更多相关文章
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- 鼠标点击按钮控制图片移动或者键盘控制图片移动(解决问题:parseInt失效问题,用Number)
在测试用鼠标点击按钮,使图片左右上下移动: 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
- 【demo练习三】:图片水平滚动、点击按钮变更图片动画
要求:四张图片水平滚动,每隔5秒进行一次循环,点击按钮随机变更图片. XAML前台代码: <Window x:Class="图片滚动.MainWindow" xmlns=&q ...
- javascript总结36:DOM-点击按钮切换图片案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- css width="100" style ="width:100px" 区别
1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...
- 利用JS实现点击按钮后图片自动切换
我么常常看到一个网站的主界面的图片可以切换自如,那么又是如何实现的呢? 1.HTML页面布局如图所示: Main(div) top(div)(显示需要显示的图片) bottom UL (li)< ...
- JQuery移动动画实现点击按钮切换图片--JQuery基础
直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...
- 原生js点击按钮切换图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 微信小程序点击按钮将图片保存到手机
SaveCard: function(e) { let that = this; console.log('保存'); var imgSrc = e.currentTarget.dataset.img ...
随机推荐
- 从depth buffer中构建view-space position
观察透视投影矩阵: 对于x和y,矩阵变换只是一个缩放系数,那么逆变换就是缩放系数的倒数,所以 设Xndc Yndc为NDC空间中的XY坐标,Xview Yview Zview为view space中的 ...
- ST HW1 An Error
曾经使用ThinkPHP完成一个网上电子银行的项目,凡是涉及到金钱的,需要注意的问题很多,比如使用float类型,比如金钱的数额不能为负数等等.最初没有考虑到剩余金额不能为负数或者消费的金额不能为负, ...
- win8和ubuntu双系统
硬盘安装的话只要分够内存和做好开机启动项就好了,u盘安装要注意分区(挂载)了推荐: http://wenku.baidu.com/view/5052f19b51e79b8968022623.html ...
- 从Visual Studio看微软20年技术变迁
前言 这个世界从来都不缺变革,从工业革命到晶体管和集成电路,从生活电器到物联网,从简陋人机到精致体验,我们在享受技术带来的便捷的同时,也在为复杂设计而带来的挑战和生产力下降而痛并快乐着.而迫切期盼的, ...
- Java 中的锁——Lock接口
Java SE5之后,并发包中新增了Lock接口(以及相关实现类)用来实现锁功能.虽然它少了(通过synchronized块或者方法所提供的)隐式获取释放锁的便捷性,但是却拥有了锁获取与释放的操作性. ...
- python rsa 加密解密 (编解码,base64编解码)
最近有需求,需要研究一下RSA加密解密安全:在网上百度了一下例子文章,很少有文章介绍怎么保存.传输.打印加密后的文本信息,都是千篇一律的.直接在一个脚本,加密后的文本信息赋于变量,然后立马调用解密.仔 ...
- postman断言作用及怎么使用
这段时间一直在学习postman,在请求中使用断言,很多人不是很了解postman断言,其实呢,postman断言是JavaScript语言编写的,在postman客户端指定区域编写即可. 1.设置环 ...
- 利用python的爬虫技术爬取百度贴吧的帖子
在爬取糗事百科的段子后,我又在知乎上找了一个爬取百度贴吧帖子的实例,为了巩固提升已掌握的爬虫知识,于是我打算自己也做一个. 实现目标:1,爬取楼主所发的帖子 2,显示所爬去的楼层以及帖子题目 3,将爬 ...
- 如何在RecyclerView上面实现"拖放"和"滑动删除"-2
拖动手柄 在设计一个支持"拖放"的列表时, 通常提供一个在触摸时初始化拖拽的"拖动手柄". 因其可发现性和可用性而被Material Guidelines所推荐 ...
- 修改jsp默认编码
新建一个jsp页面默认的PageEncoding属性是iso8859-1,但是要使用中文的话,就乱码了,下面是修改新建jsp默认编码的步骤.