學(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)的效果
html代碼:
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