ウェブ制作、コーディング初心者のメモ

: jQuery

Masonryのギャラリーの画像にホバーしたときに動きを付けてみる

2015/10/29 Masonry, ホバー

今回はMasonryのギャラリーの画像にマウスのカーソルを乗せたときに青い半透明のアニメーションがでるようしてみました。サンプルコードの実行結果はこちら今回使用したプラグイン・Mansonry ...

: jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

2015/10/29 imagesLoaded, Masonry

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。サンプルコードの実行結果はこちら今回使用したプラグイン・Masonry ・colorbox ・imag ...

: jQuery

Masonryのギャラリーにフィルター機能を追加する

2015/10/29 imagesLoaded, Masonry, ギャラリー, フィルター

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギャラリーがまず表示されます。次に国名をクリックすると、その国名に該当する写真だけを抽出して表示します ...

: jQuery

Masonryでギャラリーページを作ってみる

2015/10/29 Masonry, ギャラリー

今回使用するjQueryプラグイン ●Masonry フレキシブルなレイアウトを生成するために使用するjQueryプラグインです、幅、高さが異なるコンテンツを領域ぴったしに並べるためのものです。 ●i ...

: jQuery

空間を最大限に使いトップページの画像をタブで切り替える。

2016/1/24 切り替えタブ

今回、書くのは、トップページに複数の作品を乗せたいときに、スクロールさせず、画面上部に配置したタブを切り替えることにより、表示させるものを切り替えるjQueryを作成します。分かりにくいので ...

: jQuery

画面を下にスクロールさせると、違うデザインのメニューがついてくる

2015/10/29 グローバルナビ, スティッキーメニュー

タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しました。サンプルコードの実行結果はこちら今回は「throttle-debounce」プラグインを使用 ...

: jQuery

タブを作成して、空間を最大限に使う

2015/10/29 タブ, 複数コンテンツ

今回はパネルを使って、複数のコンテンツを１つのエリアに配置して、ブラウザ上部に設けたタブをクリックすることによって表示するコンテンツを切り替えるものを作成します。詳細はサンプルコード上にコメントアウ ...

jQuery

ついてくるヘッダーメニューを作成する

2015/10/29 スティッキーメニュー, ヘッダーメニュー

タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>ついてくるヘッダーメニューを作ってみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        ul{list-style-type:none;}
        p{font-family:"メイリオ";}

        body{padding-top:192px;}
        header #navMenu{
            margin: 0 auto;
            width: 960px;}

        /* ページヘッダーに付すclass */
        .pHeader{
            /*
                全体のレイアウトに影響しないように
                ヘッダーを固定する　
            */
            position:absolute;
            width:100%;
            min-width:960px;
            box-shadow: 0 2px 2px rgba(0,0,0,0.3);
            background-color:#f0f0f0;}

            nav ul li{float:left;}
            nav ul li a{
                line-height:48px;
                letter-spacing:2px;
                padding:0 1.5em;}

        /* 
        ウィンドウのスクロール量が一定値を超えたら
        要素に付すクラス
        */
        .pHeader.sticky{
            position:fixed;
            top:0px;}

        #container{
            /*
            li a内のline-heightのpxと同じ値を
            設定している。これがないと、テキストの
            一部がメニュー下に隠れてしまう。
            */
            padding-top:48px;

            width:960px;
            background-color:#d8d8d8;
            margin:0 auto;}
    </style>
</head>
<body>
    <header class="pHeader">
        <div id="navMenu">
        <nav>
            <ul>
                <li><a href="#">Menu1</a></li>    
                <li><a href="#">Menu2</a></li>    
                <li><a href="#">Menu3</a></li>    
                <li><a href="#">Menu4</a></li>    
                <li><a href="#">Menu5</a></li>    
            </ul>
            </nav>
        </div>
    </header>

    <div id="container">
    <p>
    どこまでも追尾してくるヘッダーメニューのテスト<br>
    下にスクロールをさせてみてください。<br>
    どこまでもメニューがついてきます。
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    </p>
    </div>

<script>
$(function(){
    
    $(".pHeader").each(function(){
        /*
            ウィンドウとヘッダーを
            jQueryオブジェクトとする
        */
        var 
        $window = $(window),
        $header = $(this);
        /*
            ヘッダーのデフォルト位置を取得する
            変数offsetTopには、ドキュメントの上端からの距離が
            pix単位で格納されています。

            offset()メソッドは
            「jQuery要素のドキュメント上の位置を取得」します。
            offset()は２つのプロパティを保持してます。
            top :ドキュメント上端からの距離
            left:ドキュメント左端からの距離
        */
        var hOffsetTop = $header.offset().top;

        /*
            ウィンドウのスクロールされたとき
            実行される処理はここのfunction(){..}に書く
        */
        $window.on("scroll",function(){
           /*
                ウィンドウのスクロール量を調べ
                ヘッダーの初期位置より下にスクロール
                しているかを判定する
           */
            if( $window.scrollTop() > hOffsetTop ){
                /*
                初期位置より下にスクロールしている場合
                "sticky"classを付す
                */
                $header.addClass("sticky");
            }else{
                $header.removeClass("sticky");
            }
        });            
        /*
            ウィンドウのスクロールイベントを発生させる
        */
        $(window).trigger("scroll");
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

<!doctype html>

<html>

<head>

<title>ついてくるヘッダーメニューを作ってみる</title>

<style>

*{margin:0;padding:0;}

ul{list-style-type:none;}

p{font-family:"メイリオ";}

body{padding-top:192px;}

header #navMenu{

margin: 0 auto;

width: 960px;}

/* ページヘッダーに付すclass */

.pHeader{

全体のレイアウトに影響しないように

ヘッダーを固定する　

position:absolute;

width:100%;

min-width:960px;

box-shadow: 0 2px 2px rgba(0,0,0,0.3);

background-color:#f0f0f0;}

nav ul li{float:left;}

nav ul li a{

line-height:48px;

letter-spacing:2px;

padding:0 1.5em;}

ウィンドウのスクロール量が一定値を超えたら

要素に付すクラス

.pHeader.sticky{

position:fixed;

top:0px;}

#container{

li a内のline-heightのpxと同じ値を

設定している。これがないと、テキストの

一部がメニュー下に隠れてしまう。

padding-top:48px;

width:960px;

background-color:#d8d8d8;

margin:0 auto;}

</style>

</head>

<body>

<nav>

<ul>

</ul>

</nav>

</div>

</header>

<p>

どこまでも追尾してくるヘッダーメニューのテスト<br>

下にスクロールをさせてみてください。<br>

どこまでもメニューがついてきます。

<br>

</p>

</div>

$(function(){

$(".pHeader").each(function(){

ウィンドウとヘッダーを

jQueryオブジェクトとする

var

$window = $(window),

$header = $(this);

ヘッダーのデフォルト位置を取得する

変数offsetTopには、ドキュメントの上端からの距離が

pix単位で格納されています。

offset()メソッドは

「jQuery要素のドキュメント上の位置を取得」します。

offset()は２つのプロパティを保持してます。

top :ドキュメント上端からの距離

left:ドキュメント左端からの距離

var hOffsetTop = $header.offset().top;

ウィンドウのスクロールされたとき

実行される処理はここのfunction(){..}に書く

$window.on("scroll",function(){

ウィンドウのスクロール量を調べ

ヘッダーの初期位置より下にスクロール

しているかを判定する

if( $window.scrollTop() > hOffsetTop ){

初期位置より下にスクロールしている場合

"sticky"classを付す

$header.addClass("sticky");

}else{

$header.removeClass("sticky");

}

});

ウィンドウのスクロールイベントを発生させる

$(window).trigger("scroll");

});

</script>

</body>

</html>

: jQuery

スライドショーに色々な機能を付けてみた。

2015/10/29 スライドショー

詳細はサンプルコードにコメントアウトしました。サンプルコードの実行結果はこちら CSSのサンプルコードは以下です。今回はコードが長いので、CSSとHTMLに分けています。 [crayon-69b73 ...

jQuery

jQueryでスライドショーを作ってみる

2015/10/29 スライドショー

タイトルの通りです。簡単なスライドショーを作成してみました。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>スライドショーを作ってみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>

    <style>
        *{margin:0;padding:0;}
        
        .slideShow{
            position:relative;
            width:320px;
            height:180px;
            overflow:hidden;
        }
        .slideShow img{
            position:absolute;
            left:0;
            display:none;
        }
    </style>

</head>
<body>
<div class="slideShow">
    <img src="../img/0.JPG">
    <img src="../img/1.JPG">
    <img src="../img/2.JPG">
    <img src="../img/3.JPG">    
</div>
    
<script>
$(function(){
    
    /*
    each.～の箇所
    jQueryがHTMLの中から「.slideShow」というクラスを持った
    要素を探してきて、それぞれに対してこの括弧内の処理を実行する。
    
    今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。
    */
    $(".slideShow").each(function(){
        
        //全てのスライド
        var $slide = $(this).find("img"),
            
        //現在のスライドを示す番号を格納
            currentNum = 0;
        
        //スライドを徐々に表示する
        $slide.eq( currentNum ).fadeIn();
        
        //2000/1000=２秒間隔で「showNextSlide」を呼び出す
        setInterval( showNextSlide,2000);
        
        function showNextSlide(){
            /*
                $slide.lengthは、$slideの要素数が入っています。
                今回は画像が４枚なので「４」が格納されています。                
            */
            var nextSlideNum =( currentNum + 1 ) % $slide.length;
            
            //スライドを徐々に非表示する
            $slide.eq( currentNum ).fadeOut();

            //次のスライドを徐々に表示する            
            $slide.eq( nextSlideNum ).fadeIn();
            
            //現在の見ている画像番号に、「次の」番号を格納する
            currentNum = nextSlideNum;
        }
    });
});
</script>
</body>
</html>

<!doctype html>

<html>

<head>

<title>スライドショーを作ってみる</title>

<style>

*{margin:0;padding:0;}

.slideShow{

position:relative;

width:320px;

height:180px;

overflow:hidden;

}

.slideShow img{

position:absolute;

left:0;

display:none;

}

</style>

</head>

<body>

</div>

$(function(){

each.～の箇所

jQueryがHTMLの中から「.slideShow」というクラスを持った

要素を探してきて、それぞれに対してこの括弧内の処理を実行する。

今回のサンプルでは「.slideShow」は一つだけなので処理は一回だけです。

$(".slideShow").each(function(){

//全てのスライド

var $slide = $(this).find("img"),

//現在のスライドを示す番号を格納

currentNum = 0;

//スライドを徐々に表示する

$slide.eq( currentNum ).fadeIn();

//2000/1000=２秒間隔で「showNextSlide」を呼び出す

setInterval( showNextSlide,2000);

function showNextSlide(){

$slide.lengthは、$slideの要素数が入っています。

今回は画像が４枚なので「４」が格納されています。

var nextSlideNum =( currentNum + 1 ) % $slide.length;

//スライドを徐々に非表示する

$slide.eq( currentNum ).fadeOut();

//次のスライドを徐々に表示する

$slide.eq( nextSlideNum ).fadeIn();

//現在の見ている画像番号に、「次の」番号を格納する

currentNum = nextSlideNum;

}

});

</script>

</body>

</html>

« Prev 1 … 21 22 23 24 25 … 40 Next »