js經(jīng)過小圖顯示大圖簡單代碼的簡單介紹
這個是隨鼠標移動查看放大圖片響應(yīng)的是onmousemove事件 你可以改下 第二種方法可自定義CSS樣式,控制jQuery插件jQuery Image Flyout提示小圖片顯示效果代碼 一,包含文件 二,HTML部分DIV層內(nèi)所用圖片鏈接jQuery插件flyout彈出圖片 三。
由遠到僅需要做圖片的效果或者用css3效果也行,但目前的兼容性不行div固定大小 js,jquery只用setTimeoutsetInterval函數(shù)進行圖片由小變大,寬度到底指定寬度后停止放大。
用JS結(jié)合CSS完成 onMouseOver 對應(yīng)的height 和widtth是鼠標經(jīng)過的變大的值,onMouseOut對應(yīng)的是原始大小img標簽的那個height和width要和onMouseOut的那個一樣,當然你也可以按個人喜好設(shè)。
新建html文件,例如indexhtml2在indexhtml中的標簽中,輸入css代碼div width 72pxheight 72pxbackground urlsmall3png norepeatoverflow hidden 3瀏覽器運行indexhtml頁面,此時成功將矩形圖片只顯示了正方形部分4點擊小圖后,成功顯示了大圖。
上面大圖是 function showImg 這里用到的是Jquery選擇器,用documentgetElementByIdid函數(shù)也可以做到 thissrc我不確定對不對,反正是取當前對象的src屬性 quot#largePhotoViewquotattrquotsrcquot,thissrc 然后點擊對應(yīng)的小圖就可以了。
掃描二維碼推送至手機訪問。
版權(quán)聲明:本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布,如需轉(zhuǎn)載請注明出處。