为了账号安全,请及时绑定邮箱和手机立即绑定

用JavaScript实现图片缓慢缩放效果

难度初级
时长30分
学习人数
综合评分9.67
88人评价 查看评价
9.7 内容实用
9.7 简洁易懂
9.6 逻辑清晰
我发现灵异事件,当我写到缩小的时候图片就不断抖动!!!
<div style="width:400px;margin: auto">
<img src="http://img1.sycdn.imooc.com//53577ee900016c2102080260.jpg" id="myImage" style="display: block" />
<input type="button" id="max" value="放大" style="margin-right: 10px" />
<input type="button" id="min" value="缩小" />
老师讲的很细,我的效果也是出来了,再代码里,缩小的话也可以用除法“/”也可以的。
老师用的是img.width,
我们可以用img.style.width来做,并且要把img.style.width转换为数值才能进行数字操作。
转换方法一:
img.style.width=img.offsetWidth*1.05+"px"; //增加宽度
转换方法二:
img.style.width=parseInt(img.style.width)*1.05+"px"; //增加宽度
慕课视频前面那个声音,好刺耳啊。。。。
看了评论真受不了那些自以为很6的人,你们技术好还来看这些干嘛?装逼也要有节制。了不起?
每次变成1.05倍,增加6次并不是你讲的1.3倍好吧。因为1.05都是变成前一次的1.05倍,img.width值每次执行都会更新,也就是1.05^6算出来是1.34......
最后的最后少了一个花括号“}”,不然运行不出来,这就是坑,没有坑也要挖坑。
进来瞧瞧,setInterval()
老师实现的效果是基于XHTML的,如果在HTML5中,img.width 和 img.height 只能读取(值为数字类型),不能写入,缩放是实现不了的。大家可以用 img.style.width、img.style.cssText、img.style.getPropertyValue(Name)、img.style.setPropertyValue(Name)试试,不过这些属性方法读取的值和写入的值都是“字符串类型”,带有“...px”单位的。我接下来是把他们都转换成了数字类型,我感觉挺麻烦的。有没有大神,有其他的方法?

最新回答 / 慢l慢
可以用css3,大概是最简单的做法了
这种页面布局写的连我个菜鸟都知道很不规范,竟然用<br />来换行....
首页上一页1234567下一页尾页
课程须知
1.掌握HTML+CSS相关的基础知识 2. 熟悉 JavaScript基础知识,尤其对鼠标点击事件等知识精通
老师告诉你能学到什么?
1.掌握用JS方式实现图片缓慢放缩效果 2.学习到setInterval()和clearInterval()两个函数的用法

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消