學(xué)會如何獲取鼠標(biāo)的坐標(biāo)位置以及監(jiān)聽鼠標(biāo)的按下、拖動、松開等動作事件,從而實現(xiàn)拖動鼠標(biāo)來改變圖片大小。

還可以學(xué)習(xí)css中的clip屬性。

一、CSS實現(xiàn)圖片不透明及裁剪效果。

圖片剪切三層結(jié)構(gòu)
1、第一層opacity,給圖層設(shè)置透明度
2、第二層clip,clip屬性:對圖片進(jìn)行裁剪,實現(xiàn)圖像的一部分顯示,其他部分進(jìn)行隱藏
3、第三層選取框absolute(與第二層重疊的),包括八個觸點(diǎn)的效果
萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)
html代碼:

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 1 <div id="box"> 2     <img src="img/1.jpg" id="img1" /> 3     <img src="img/1.jpg" id="img2" /> 4     <div id="main"> 5         <div class="Divmin up-left"></div> 6         <div class="Divmin up"></div> 7         <div&n
        
		

網(wǎng)友評論