最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

制作思路：“放大鏡”后有一幅背景圖，它是“放大了”的圖的原本。我們通過移動“放大鏡”時適當(dāng)調(diào)整背景圖的位置，使它顯示的剛好是需要要放大的部分。

效果預(yù)覽：

在線效果演示： (點(diǎn)這里在新窗口中查看)

制作步驟：

先準(zhǔn)備兩幅內(nèi)容相同尺寸不同的圖片，這里我們找了一個400×300像素的縮略圖small_hill.gif，一個800×600像素的大圖big_hill.gif。然后再準(zhǔn)備一個“放大鏡”的圖片，注意它中間部分必須是透明的，這里我們準(zhǔn)備了一個綠色的方框 viewer.gif。

編寫如下的代碼：

以下是兩幅圖的代碼，都它們作為層。第一幅是縮略圖，第二幅是“放大鏡”，首先將它的背景移到不可見的地方； 其中“ onclick="moveme=!moveme" ”表示每次點(diǎn)擊它都改變“moveme”的布爾值。

 
 
 
 
  
  
  
  
   
  
  
  
  
  
  
  
  
style="left:0;top:0;background-repeat:no-repeat; background-position:2000px 2000px;position:absolute;">   
 
 
 

以下是JavaScript腳本:

【編輯推薦】

1. 中文前端UI框架Kit:超酷的瀑布流特效動畫
2. JavaScript圖片變換效果(IE only)
3. 中文前端UI框架Kit:搖頭動畫
4. JavaScript馬賽克遮罩圖片幻燈片切換類
5. 看JavaScript如何實(shí)現(xiàn)頁面自適

當(dāng)前名稱：另一款有意思的JS圖片放大鏡
瀏覽地址：http://m.fisionsoft.com.cn/article/cdhjgss.html