:: jQueryで実現するappleで見た画面の一部をルーペで拡大

/ / WEB制作・開発

あのappleのRetineの画面クオリティが確認できるルーペで拡大する仕掛けについて。

出来た時は本当に感動です。

jQueryのバージョン1.4.2で実現します。

151020_photo004
デモページはこちら  

   

 

ソース

 

html

 

 

css

 

 

javascript

 

解説

 

  1. iPhoneとニュースの画像をbackgroundで表示。position:absolute;を使って、iPhone画像の上にニュース画像を乗せる感じ
  2. cssの#retineで読み込んでいる画像は拡大用の画像 ※実際のサイズの2倍の大きさにする
  3. script.jsのoffsetメソッドを使って、20行目のwebpage.mousemove(function(e)で現在の座標を取得
  4. script.jsの44行目のretina.cssでHTMLの31行目の<div id=“retina”></div>にleftとtopとbackground-positionのstyleを追加している
  5. script.jsの50行目〜54行目まmではマウスオンしたかどうかでルーペを表示するかしないかを判断している

SNS SHARE

RELATED POSTS

LEAVE A REPLY