亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

用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”單位的。我接下來是把他們都轉換成了數字類型,我感覺挺麻煩的。有沒有大神,有其他的方法?
這種頁面布局寫的連我個菜鳥都知道很不規范,竟然用<br />來換行....
是的 雖然現在做放大縮小都用CSS3了,,, 但是本還是不能忘
不知不覺,又是一年高考過去,如果之前美工兼任前端css布局也算的話,從事這一行也一年多了。大學畢業好幾年了,渾渾噩噩,面試碰壁無數,當真屌絲一枚?;蛟S是有些浮躁,也或許以前浪費時間太多,現在每天努力學習javascript知識是必須的,你的明天會更好。加油!!
我照著寫了一遍但是沒有用,加了縮小就沒有用了
如果你給img設置寬高那就不能用img.widht了,需要寫成parseInt(getComputedStyle(img).width),才能獲得img的寬度和高度
首頁上一頁1234567下一頁尾頁
課程須知
1.掌握HTML+CSS相關的基礎知識 2. 熟悉 JavaScript基礎知識,尤其對鼠標點擊事件等知識精通
老師告訴你能學到什么?
1.掌握用JS方式實現圖片緩慢放縮效果 2.學習到setInterval()和clearInterval()兩個函數的用法

微信掃碼,參與3人拼團

微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

友情提示:

您好,此課程屬于遷移課程,您已購買該課程,無需重復購買,感謝您對慕課網的支持!

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?

舉報

0/150
提交
取消