- 2011-12-27 (Tue) 11:22
- Web
テレビ番組もスペシャルばかりで、見るものない・・。そう思いませんか？
まぁ～、通常でも見るものが少ないという人もいるでしょう。^^；
皆さんは、年末の番組は何を見るのでしょうかね。紅白？それとも裏番組。
私は、見ながら族ですから、ターゲットはその時間で決めます。
人によっては、ビデオで裏番組を録画する人もいるでしょうが、それをいつ観るのでしょうか？お正月中、テレビばかりでは味わいがないですよね。
でも、外に出ると車の渋滞、飲食店は混む・・。
結局は、いつものお正月を過ごすことになるのでは。それが自然かな。
今日は、スマートフォンで使用されるフリックの作り方を記述します。
基本はJSです。
必要なJSライブラリは、jquery.flicksimple.jsとjquery-1.7.min.jsです。
jquery-1.7.min.jsは、DLしたJQueryのバージョンで指定します。
ソースコードは以下のようになります。
-----------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<title>Flick test</title>
<link rel="stylesheet" type="text/css" href="css/import.css" media="all">
<script src="js/jquery-1.7.min.js"></script>
<script src="js/jquery.flicksimple.js"></script>
</head>
<body>
<div id="wrapper">
<article>
<div id="mainimg">
<ul>
<li><a href="#"><img src="images/img01.jpg" width="139" height="168" alt="Work01"></a></li>
<li><a href="#"><img src="images/img02.jpg" width="289" height="168" alt="Work02"></a></li>
<li><a href="#"><img src="images/img03.jpg" width="89" height="168" alt="Work03"></a></li>
<li><a href="#"><img src="images/img04.jpg" width="106" height="168" alt="Work04"></a></li>
</ul>
<!-- /mainimg --></div>
<script>
$('#mainimg').flickSimple();
</script>
</article>
</body>
</html>
---------------------------------------------------------------------------------------
次にCSSですが、フリックの部分は以下のように記述します。
#mainimg {
width: 100%;
position: relative; /* IE6・7の overflowバグ回避 */
overflow: auto; /* JavaScript無効時にスクロール表示させたいから */
}
#mainimg ul {
display: block;
width: 400%;
margin: 0;
padding: 0;
}
#mainimg ul li {
float: left;
list-style-type: none;
width: 25%;
}
#mainimg ul は、リストの要素数÷一度に表示させる要素数×100％
（ここでは一度に表示させる画像は1つで、画像（要素）数が4枚）
#mainimg ul liは、100％÷リストの要素数
（ここでは、リストの要素が4つなので25％）
この記述をすることでリスト要素が水平に並ぶようになる。
最後にフリック機能を追加するので、id[mainimg]にJSを追加します。
<script>
$('#mainimg').flickSimple();
</script>
以下のURLにアクセスするとサンプルが見れます。
http://www.k-fix.jp/t/flick/
スマートフォンで確認してください。PCでも見れますが、マウスで画像をフリックすると動きは見れます。
- Newer: CSS3でボタン作成
- Older: JQueryの初歩
Comments:1
- mydqxprm6 2013-08-19 (Mon) 13:00
-
ティエリーミュ グレーのエンジェル天使モードパルファムは有名な写真家の驚くほど性的な創造ではありません。ティエリーミュ グレー彼導入ケルン 1992 年までの最初: '天使' の香水は、印象をされているし、キーを打った、イギリスはまた、あなたに。ビジネス、しかし販売のこれらの種類を提供するのに合法性を使用しながら状態手数料オフィス内で毎日チェックに関するその他の提供を行います。そのあなただけ、あなたそれが送料無料した群衆は、締切日の前にちょうど彼らを購入するかどうか、または彼らはあなたからの新しい金額を購入した場合。本質的には調査の手紙と本計画しようとしてのような可能性があります。
<a href=http://www.watchmise.asia>G-SHOCK 腕時計</a>
, <a href=http://www.watchhannbai.asia>emporio armani 時計</a>
, <a href=http://www.watchtennpoo.asia>G-SHOCK 腕時計</a>
比較的望ましい条件靴の考慮の価値があるの人アーティストの繊細さの軽減にも高速ペアもない確かに結婚式のガウンも個人内つかむように誘惑を見つけます。アーロン ・ ヴィトン手袋棚下 Kikujin ゾム高貴な女王の時間です。「ファブリックに関連づけられたファブリックのランプ シェードに見つけられるかもしれない非常に興味深いもの。」中野イランの援助の女性示すモト色床ランプ、スピン ハリー ・ ヴィトン財布 - 文字列を開く経験黄色チュール自明木陰の青い話は即座に教育がある赤になった。
<a href=http://watchsale.lvoutlet2u.net>NIXON 腕時計</a>
, <a href=http://www.watchsalemise.asia>シャネル 腕時計</a>
, <a href=http://www.watchsalehannbai.asia>カシオ 腕時計 レディース</a>
ローズマリー オイルと一緒にバンドルされているトコフェ ロールはそれに向かって選択と共に明らかに帰化になる可能性があります確認鮮度は間違いなく重要な結合定義です。このような靴のペアをこの特定のオンライン ストア購入は華麗であるオプション、瞬間のためだけでなくさらにあなたの人生。私はあなたのユニークなライブ機関はグッチを使用した後の大きな巨大な違いを必要があります。
<a href=http://www.watchsaletennpo.asia>ウブロ 腕時計 メンズ</a>
, <a href=http://watch.lvoutlet2u.net>バーバリー 腕時計</a>
それは絶対にないであるを通知するために非常に単純なメーカーは時々 彼らを決定する現時点で動作するように誰かがあなたに最適です。異なる色の組み合わせの選択、ギャンブル企業、鮮やかな暖かい、ブルー、tentalizing 脱線、結果としてモンクレール探して色食チャレンジ主として交換可能な変更と同様ながら、あなたのヤード尺にストアのレジデンスを補完します。あなたの足の快適さと比較して重要なことができるかそれは、かなり何も。あなたの足は行くことがおそらくないどこでも自分で足の病気からフィートに苦しむ場合に不可欠です。私たちのほとんどは積極的に知っている、教会その脂肪ランドリー維持無音実験。