intense.jsを活用した画像拡大・スクロール表示の実践ガイド｜DAD UNION – エンジニア同盟
intense.jsは、クリックした画像をビューアとして拡大表示するための非常にシンプルで効果的なJavaScriptライブラリです。 この記事では、intense.jsを使用して画像を拡大表示し、拡大画像を上下左右にスクロール表示する方法を解説します。 前提となるCSSの設定 まずは、拡大表示する画像のサムネイルエリアを定義するためのCSSを設定します。このサムネイルエリアは .demo クラスとして定義されます。 このエリアは、マウスカーソルを上に乗せると拡大マークが表示され、クリックすることで画像が拡大されるようになっています。 <style> * { padding: 0; margin: 0; } body { font-size: 14px; text-align: center; } .ttl{ text-align: center; font-size: 20px; pad
Retina Effect With jQueryで画像の一部を虫眼鏡で拡大表示する方法｜DAD UNION – エンジニア同盟
解像度の高い画像を1枚用意し、Retina Effect With jQueryを使ってその画像の一部を虫眼鏡で拡大表示する方法をご紹介します。 画像の一部を虫眼鏡で拡大表示するCSSの記述例 ※虫眼鏡で拡大表示する画像エリアを設定します。必要に応じて変更して下さい。 <style type="text/css" media="all"> <!-- body{ margin:0; padding:0; } h1{ text-align:center; font-size:18px; font-weight:bold; padding:10px 0; line-height:1.4em; text-align:center; } .clWrap{ width:750px; margin:0 auto; } #iphone{ /* The iphone frame div */ width:4
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
