jQuery/OKZoom
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*jQuery Zoom
ルーペ機能の導入 [[DEMO>https://design.kyusan-u.ac.jp/Sa...
jQueryを利用したスクリプト OKZoom の導入方法を紹介します...
~
***準備
-1）ファイルセットのダウンロード
http://okfoc.us/okzoom/ から最新のものをDLして下さい。
必要なのは ''okzoom.min.js'' だけです。
-2） 構成ファイルの確認
--index.html （動作確認用）
--css（フォルダ） / ''style.css''
--js （フォルダ）/ jquery-xxxxx.min.js okzoom.min.js '...
--images（フォルダ）/ sample.jpg
-3) index.html、style.css,、sample.jsの３つについて、それ...
~
***HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/okzoom.min.js"></script>
<script src="js/sample.js"></script>
<link href="css/style.css" rel="stylesheet" >
</head>
<body >
<div id="container">
<img src="images/sample.jpg" width="640">
<p>mona lisa</p>
</div>
</body>
</html>
-画像は実寸よりも小さく(ここでは幅640pxで)表示しています。
~
***CSS
body{
background-color: black;
color: silver;
text-align:center;
}
~
***JavaScript
$(function(){
$('img').okzoom({
width: 200,
height: 200,
round: true,
background: "#fff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000",
border: "1px solid black"
});
});
~
~
終了行:
*jQuery Zoom
ルーペ機能の導入 [[DEMO>https://design.kyusan-u.ac.jp/Sa...
jQueryを利用したスクリプト OKZoom の導入方法を紹介します...
~
***準備
-1）ファイルセットのダウンロード
http://okfoc.us/okzoom/ から最新のものをDLして下さい。
必要なのは ''okzoom.min.js'' だけです。
-2） 構成ファイルの確認
--index.html （動作確認用）
--css（フォルダ） / ''style.css''
--js （フォルダ）/ jquery-xxxxx.min.js okzoom.min.js '...
--images（フォルダ）/ sample.jpg
-3) index.html、style.css,、sample.jsの３つについて、それ...
~
***HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample</title>
<script src="js/jquery-xxxxx.min.js"></script>
<script src="js/okzoom.min.js"></script>
<script src="js/sample.js"></script>
<link href="css/style.css" rel="stylesheet" >
</head>
<body >
<div id="container">
<img src="images/sample.jpg" width="640">
<p>mona lisa</p>
</div>
</body>
</html>
-画像は実寸よりも小さく(ここでは幅640pxで)表示しています。
~
***CSS
body{
background-color: black;
color: silver;
text-align:center;
}
~
***JavaScript
$(function(){
$('img').okzoom({
width: 200,
height: 200,
round: true,
background: "#fff",
backgroundRepeat: "repeat",
shadow: "0 0 5px #000",
border: "1px solid black"
});
});
~
~
ページ名:
