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="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>



<h2>3．HTMLの記述例</h2>


<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