jQueryで画像の一部を虫眼鏡で拡大した様に表示してみる



解像度の高い画像を1枚用意しその画像の一部を
虫眼鏡で拡大した様に表示します。

画像のズームや虫眼鏡系も色々ありますよね。

1.CSSの記述例

<style type="text/css" media="all">
<!--
#iphone{
	/* The iphone frame div */
	width:499px;
	height:283px;
	position:relative;
	margin:0 auto;
}
#webpage{
	/* Contains the webpage screenshot */
	width:499px;
	height:283px;
}
#retina{
	/* The Retina effect */
	background:url('img/webpage.png') no-repeat center center white;
	border:2px solid white;

	/* Positioned absolutely, so we can move it around */
	position:absolute;
	height:180px;
	width:180px;

	/* Hidden by default */
	display:none;

	/* A blank cursor, notice the default fallback */
	cursor:url('img/blank.cur'),default;
	
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	-webkit-box-shadow:0 0 5px #777;
	box-shadow:0 0 5px #777, 0 0 10px #aaa inset;
	
	/* CSS3 rounded corners */
	-moz-border-radius:90px;
	-webkit-border-radius:90px;
	border-radius:90px;
}
#retina.chrome{
	/* A special chrome version of the cursor */
	cursor:url('img/blank_google_chrome.cur'),default;
}
#main{
	/* The main div */
	margin:0 auto;
	position:relative;
	width:750px;
	padding-top:50px;
}
-->
</style>

2.読込むJsファイル

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

3.HTMLの記述例

    <div id="main">
    
        <div id="iphone">
            <div id="webpage">
                <img src="img/webpage.png" width="499" height="283" alt="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー"  title="BLINDER HIDDEN: WEBエンジニアの隠れたファインプレー" />
                <div id="retina"></div>
            </div>
        </div>
        
    </div><!--/main-->

画像の一部を虫眼鏡で拡大した様に表示するデモ

ソース元:Apple-like Retina Effect With jQuery | Tutorialzine

GoogleMapの地図が画像に差替えられた様なイメージでの
挙動ができると理想系な気がします。
難しい様な気がしますが。