マウスオーãƒãƒ¼ã§ç”»åƒã‚’ズームã—ã¦è¡¨ç¤ºã™ã‚‹ãŸã‚ã®jQueryプラグインを紹介ã—ã¾ã™ã€‚
大ããªç”»åƒã‚’表示ã—ãŸã„ãŒãã®ç”»åƒã°å ´æ‰€ã‚’ã¨ã‚‹ã®ã¯é¿ã‘ãŸã„。
ãã‚“ãªæ™‚ã«ã€å°ã•ã„æž ã§è¡¨ç¤ºã—ã¦ãŠãマウスを載ã›ãŸç®‡æ‰€ãŒæ‹¡å¤§è¡¨ç¤ºã•ã‚Œã‚‹ãŸã‚ã¨ã¦ã‚‚便利ã§ã™ã€‚
ダウンãƒãƒ¼ãƒ‰ã¯GitHubã‹ã‚‰è¡Œãˆã¾ã™ã€‚
ダウンãƒãƒ¼ãƒ‰ã—ãŸãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªå†…ã®ã€Œdemo.htmlã€ã‚’見るã“ã¨ã§ã€ä¸€é€šã‚Šã®è¨å®šæ–¹æ³•ãŒåˆ†ã‹ã‚‹ã¨æ€ã„ã¾ã™ã€‚
htmlを以下ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ã€‚
<span class='zoom' id='ex1'>
<img src='daisy.jpg' width='555' height='320' alt='Daisy on the Ohoopee'/>
<p>Hover</p>
</span>
<span class='zoom' id='ex2'>
<img src='roxy.jpg' width='290' height='320' alt='Roxy on the Ohoopee'/>
<p>Grab</p>
</span>
CSSを以下ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ã€‚
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(grab.cur), default; }
#ex2 img:active { cursor: url(grabbed.cur), default; }
JavaScriptを以下ã®ã‚ˆã†ã«è¨˜è¿°ã—ã¾ã™ã€‚
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
});
「ex1ã€ã®å€¤ã¯htmlã§è¨˜è¿°ã—ãŸIDã¨åˆã‚ã›ã¦ãã ã•ã„。
zoom関数ã§ã¯ã€ä¸Šè¨˜ã®ã€Œãƒ‡ãƒ•ã‚©ãƒ«ãƒˆï¼ˆæŒ‡å®šãªã—)ã€ã¨ã€Œgrabã€ã®ä»–ã«ã€Œclickã€ã€ã€Œtoggleã€ãŒæŒ‡å®šã§ãã¾ã™ã€‚
ãã‚Œãžã‚Œã®å‹•ä½œã¯ä»¥ä¸‹ã®ã‚ˆã†ã«ãªã‚Šã¾ã™ã€‚
タイプ | ズーム方法 |
---|---|
zoom() | マウスオーãƒãƒ¼ |
zoom({ on:'grab' }) | マウスダウン |
zoom({ on:'click' }) | クリックã—ãŸå¾Œãƒžã‚¦ã‚¹ã‚ªãƒ¼ãƒãƒ¼ |
zoom({ on:'toggle' }) | クリック |