myamanakaのブックマーク / 2015年1月28日

myamanaka id:myamanaka

2015年1月28日のブックマーク (7件)

スワイプ操作を実装できるjQueryプラグイン、TouchSwipeがイイ感じ | Studio Rubbish
あーあー今日もウェブつくるのかーめんどくせーなーつまんねーなースワイプしてえなー。フリックでもいいからー。 jQueryでできんのかなー。あ、できちゃった、これ上手くいった? ブヒヒwww ん、たてにスクロール出来なくなっちゃったね。そりゃあそうだそうだ。やぱ他人が作ったの使った方がウマウマだなブヒヒ。 Boxer flickGal FlickSlide flipsnap.js iScroll jCarouse jQuery.flickSimpe jQuery.flickable jQuery.jcflick PhotoSwipe Swipebox Swipeshow TouchSlider Unslider 色々試しました。疲れました。ほかにもこの辺を参考にしたブヒ。スマートフォン向けスワイプ・フリック系ライブラリのまとめ画像ギャラリー等、スマートフォン（iPhone /
myamanaka 2015/01/28
“出来る”
リンク
タッチイベントを用いたスワイプ＆フリックの実装サンプル
画面をタッチした状態で指を「素早く動かす、弾く」動作この2つの動作を組み込むことで、ネイティブアプリのようなスムーズな動きが実現できます。 ■ sample.css body {margin:0;padding:0;} #slider { position: relative; width: 320px; } #slider a:focus { outline: 0; } .slider-view { position: relative; border: 1px solid #bbb; width: 320px; /* スライダーで表示するエリアの大きさ */ height: 360px; overflow: hidden; /* 必須 */ } .slider-container { position: absolute; top: 0; left: 0; background-co
myamanaka 2015/01/28
リンク
レスポンシブ対応！軽量カルーセル OWL Carousel
「OWL Carousel」は、レスポンシブ対応の高機能カルーセルを実装できるjQueryプラグインです。マウス操作だけでなく、スマートフォンによる指での操作（フリックやスワイプ、タッチ）にも対応していて、レスポンシブWebデザインで取り入れると力を発揮しそうですね。動作もサクサクしており、ファイルサイズも8.8KBと軽量なのも魅力です。ただし、CSS3のtranform3dを利用しているので、IE9以下では利用できません。 ※IE9はtransf orm2dは実装されていますが、3dが実装されていないので動きません。一式ダウンロードされますが、必要なのは「owl-carousel」というフォルダにある「owl.carousel.min.js」と「owl.carousel.css」です。OWL Carouselが用意したスタイルを利用する場合は「owl.theme.css」も必要です。
myamanaka 2015/01/28
“responsive: true,”
リンク
Qiita Markdownのコードハイライト部分にXSS脆弱性 - Qiita
はじめてQiitaに日記を投稿します。よろしくお願いします。先日友人から「レポートを生成するためにQiita Markdownを使っているが、どこかにXSSがある気がする」という話を聞き、これは面白そうだとQiitaを覗きに来てみると、投稿画面にはプレビュー機能が付いているようです。Qiita Markdownをインストールする手間が省けたぞと喜んだあと、Qiita Markdownには一体どんな追加機能があるのだろうかとGoogleというサイトで検索して調べました。技術系の記事を投稿するためのサービスなだけあって、真っ先にコードハイライトするための記法が見つかったので、それをQiitaの投稿ページに入力してみました。
myamanaka 2015/01/28
リンク
JavaScriptプログラミング講座【ドキュメントオブジェクトモデル(DOM)について】
JavaScript のようなクライアント側のプログラムを使って HTML の内容を動的に変化させる概念を、「ダイナミックHTML」といいます。「JavaScript」から HTML の内容を制御する事ができるので、HTML が動的に変化するインタラクティブなコンテンツを作成する事ができます。
myamanaka 2015/01/28
リンク
Owl Carouselで1枚ずつスライドするカルーセルの作り方【デモあり】
万能だと人気のOwl Carouselですが、実際複数の画像のスライドより、1枚ずつスライドするほうがよく使うんじゃないかと思います。試しに1枚画像のスライダーを試してみました。 PCでご覧になっていてスマホで確認したい場合は、右のスライドバーにある現在のページのQRコードを読み取って、サンプルページのリンクへ移動できます。サンプルページ Owlカルーゼルは何がすごいの？ Owl Carousel(おうるかるーせる)は次のように軽量でいろいろ柔軟に対応しているから、万能で人気と言われているようです。レスポンシブ対応スマートフォン向けタッチ＆フリック操作対応 PCのマウス操作も対応同一ページ内に複数のカルーセルの設置可能 JSON（軽めの言語らしいです）の使用カスタマイズも簡単公式サイトは英語でよくわからないので、よく使いそうな最低限の設置方法をまとめました。１、ファ
myamanaka 2015/01/28
カルーセルめも
リンク
jQuery 日本語リファレンス
jQueryとは、JavaScriptのコーディングを強力に支援するライブラリです。 $('.semooh a').hover( function(){ $(this).text('ヌ？'); }, function(){ $(this).text('ヌー'); } );
myamanaka 2015/01/28
リンク
- 2015年1月29日
- 2015年1月28日
- 2015年1月27日